vharsh/calculator-plain-js-with-dom.html

## calculator-plain-js-with-dom.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <script>
        function execute() {
            console.log('some DOM event triggered this function call');
            console.log('triggered via xxx');
            // 1. fetch the values
            let x = document.getElementById("one")?.value;
            let y = document.getElementById("two")?.value;
            try {
                // 2. Compute the result
                let a = Number(x);
                let b = Number(y);
                document.getElementById('result').innerHTML = a + b;
            } catch(e) {
                console.log("TODO: why isn't a TypeError thrown during a failed casting operation?")
                console.log(e);
            }
        }
    </script>
</head>

<body>

    <input id="one" onchange="execute()"/>
    <p> + </p>
    <input id="two" onchange="execute()"/>
    <!-- <button onclick="execute()"> Submit </button> -->
    <p id="result"></p>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calculator</title>
	<script>
	function execute() {
	console.log('some DOM event triggered this function call');
	console.log('triggered via xxx');
	// 1. fetch the values
	let x = document.getElementById("one")?.value;
	let y = document.getElementById("two")?.value;
	try {
	// 2. Compute the result
	let a = Number(x);
	let b = Number(y);
	document.getElementById('result').innerHTML = a + b;
	} catch(e) {
	console.log("TODO: why isn't a TypeError thrown during a failed casting operation?")
	console.log(e);
	}
	}
	</script>
	</head>

	<body>

	<input id="one" onchange="execute()"/>
	<p> + </p>
	<input id="two" onchange="execute()"/>
	<!-- <button onclick="execute()"> Submit </button> -->
	<p id="result"></p>
	</body>

	</html>