TORONTO KIDS COMPUTER CLUB | Friday 19:00 JavaScript Homework 21.10.29.
20025
post-template-default,single,single-post,postid-20025,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-7.6.2,wpb-js-composer js-comp-ver-6.10.0,vc_responsive

Friday 19:00 JavaScript Homework 21.10.29.

04 Nov Friday 19:00 JavaScript Homework 21.10.29.

Question:

Type and load the HTML page and script below. Enter a three-digit number in the top two fields, and click the Add button. Examine the code, and explain what is wrong with the script. How do you fix the script so that the proper sum is displayed in the output field?

HTML: jsb-08-01.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Making Sums</title>
    <script type="text/javascript" src="../jsb-global.js"></script>
    <script type="text/javascript" src="jsb-08-01.js"></script>
  </head>
  <body>
    <h1>Making Sums</h1>
    <form action="addit.php">
      <p><input type="text" id="inputA" name="inputA" value="0"></p>
      <p><input type="text" id="inputB" name="inputB" value="0"></p>
      <p><input type="button" id="add" name="add" value="Add"></p>
      <p><input type="text" id="output" name="output"></p>
    </form>
  </body>
</html>



JavaScript: jsb-08-01.js

// initialize when the page has loaded
addEvent(window, "load", initialize);

function initialize()
{
  // do this only if the browser can handle DOM methods
  if (document.getElementById)
  {
    // point to critical elements
    var oInputA = document.getElementById("inputA");
    var oInputB = document.getElementById("inputB");
    var oButton = document.getElementById("add");
    var oOutput = document.getElementById("output");

    // if they all exist...
    if (oInputA && oInputB && oButton && oOutput)
    {
      // apply behaviors
      addEvent(oButton, "click", addIt);
    }
  }
}

// add two input numbers & display result
function addIt()
{
  var value1 = document.getElementById("inputA").value;
  var value2 = document.getElementById("inputB").value;
  document.getElementById("output").value = value1 + value2;
}
No Comments

Sorry, the comment form is closed at this time.