Inspect What You Expect
As a beginner programmer, it is important to inspect portions of your code to ensure that you are getting correct values, data types, etc.
A. Spot Check Code
It is not always obvious as to the type of value that an object returns. For a beginner programmer, a classic example of this is when a user enter a numeric value into a text field, the text field will still return a string. While this is not a problem if no calculation is performed, it does become an issue if a calculation is performed using a text field value as we see in the next example.
- Wrap the variables in the three alert statements with typeof() methods.
<script>
function addNumbers()
{
var firstNum = document.getElementById("firstNumber").value;
var secondNum = document.getElementById("secondNumber").value;
var sum = document.getElementById("total").value;
alert(typeof(firstNum));
alert(typeof(secondNum));
alert(typeof(sum));
}
</script>
NOTE: The built-in typeof() method will return the actual type of object that is used as its parameter.
- Save the file and preview it in a browser.
TEST RESULT: You should see that all three alert dialog boxes return a string type when the Add Numbers button and the OK button is clicked.
NOTE: We see later why the string type will work for us.
B. Create Stub Code
Stub (noun) - a web page or app code that provides only minimal information (temporary code) that is intended for later development with the actual code.
As a beginner developer and sometimes as an experienced developer, it is good to "stub" out the code to see if the functions are working as expected.
- Remove the typeof() methods that were added ealier to the third alert statements.
<script>
function addNumbers()
{
var firstNum = document.getElementById("firstNumber").value;
var secondNum = document.getElementById("secondNumber").value;
var sum = document.getElementById("total").value;
alert(firstNum);
alert(secondNum);
alert(sum);
}
</script>
NOTE: Since our goal is to add two numbers that will be entered into the first two text field and display it in the third field, we will first check to see if we are getting the correct result.
- Save the file and preview it in a browser.
TEST RESULT: You should see that when you click the Add Numbers button the first and second dialog boxes display their default values (in our case, 10 and 15) in the alert dialog boxes that are used as our "stub" code. However, instead of adding the two numbers from the two text fields, the third dialog box displays "1015" as a string because they have been concatenated instead of added. This problem will be resolved in the next section.
C. Replace With Actual Code
Once you have created stubs for your code and they are working as expected, it time to replace those stubs with actual code.
We still have all variables being displayed in the alert dialogs boxes. However, we want to have the result of the two numbers displayed in the third text field.
- Rewrite the sum variable to set the value of the third text field instead of getting its current value and then comment out all three alert statements.
<script>
var firstNum = document.getElementById("firstNumber").value;
var secondNum = document.getElementById("secondNumber").value;
document.getElementById("total").value = firstNum + secondNum;
//alert(firstNum);
//alert(secondNum);
//alert(sum);
</script>
IMPORTANT CONCEPT TO REMEMBER: Notice that the "
var sum =" was deleted from the
left side of the statement and "
= firstNum + secondNum" was added the the
right side of the statement. In programming lingo, these are called getters and setters. Getters and Setters are important terms to remember. When you want to "
get" the value of something, you
create a variable on the right side of the equal side to store the value in the variable (i.e.,
var sum = document.getElementById("total").value = firstNum;). When you want to "
set" the value of something, you
assign it a new value on the left side of the equal sign (i.e.,
document.getElementById("total").value = firstNum + secondNum;) without the variable name on the right side. It is also important to note a setter deal with
setting the value of a VARIABLE (i.e., var
sum =)
; whereas, getter deals with
getting the PROPERTY of an object (i.e.,
document.getElementById("total").value = ).
- Save the file and preview it in a browser.
TEST RESULT: You should see that when you click on th Add Numbers button you will still get a concatenation of the two numbers.
- Wrap the firstNum and secondNum variables with the built-in Number() method.
document.getElementById("total").value = Number(firstNum) + Number(secondNum);
- Save the file and preview it in a browser.
TEST RESULT: You should see that when you click on the Add Numbers button you get the correct number (i.e, 25). Type in two new numeric values for the two text fields and click the Add Numbers button again. You should see that it updated the third field correctly.
- Delete the default values (i.e., value = "10") from all three text fields as they were only needed to test your code:
<body>
<input type="text" id="firstName"> +
<input type="text" id="secondName"> =
<input type="text" id="total">
<button>Add Numbers</button>
</body>