Practice Set - Variable Type conversions: Automatic vs Explicit Conversions

by Ken Sprague

HTML

<h3>Practice Set: Variable Type conversions: Automatic vs Explicit Conversions</h3>
<h4>There are 2 problems in this practice set</h4>
<ol>
    <li>In the first problem, we meant to have the text below match <a href="https://www.youtube.com/watch?v=iX3kxAA2L4Q" target="_blank">the classic quote from <i>Mr Mom</i> (at 00:15)</a>.  
        <blockquote>
            <span id="twotwenty">220</span>, 
            <span id="twotwentyone"></span>, 
            whatever it takes...
        </blockquote>
        The sentence should read "220, 221, whatever it takes..." <b>You will change the code on line 7 to fix this problem</b> (your solution need not be all on one line)</li> <br>
    <li>In the next problem, we're outputting a phone number to the page. In this case, the number appears incorrectly. <b>You should make a change to line 15 to resolve this.</b> 
        <blockquote>My number is <span id="phonenumber"></span>   </blockquote></li>
</ol>

JavaScript

/************* FIRST PRACTICE ITEM ***************/ 
/* We get the value '220' from the page using document.getElementById().
 You don't have to fully understand this yet (don't worry, you will soon!) - just know that we've extracted the contents of the <span> element on the page so that we can add one to it. */
var theFirstNumber = document.getElementById("twotwenty").innerHTML;

/* Now we add one. You can see that theFirstNumber is being treated like a String, and so we must convert it to a number using parseInt() before we add one to it, to get the result we intended. You should do that here, so that theSecondNumber is ends up being 221. */
theFirstNumber = parseInt(theFirstNumber);
var theSecondNumber = theFirstNumber + 1;

/* Now we write the resulting value out to the second <span> element on the page.  Again, you don't need to do anything with this part - we're just using it to make the example work by outputting the result to the page. */
document.getElementById("twotwentyone").innerHTML = theSecondNumber;

/************* SECOND PRACTICE ITEM ***************/ 
/* Here we're assigning a phone number to a variable. It's kind of a silly example, but gives us a chance to practice forcing numbers into strings.  Make a change to the following line to change the number expression below to a string, so that the number appearing on the page looks like a phone number.  */
var myNumber = "555-1212";

/* Now we write the value out to the third <span> element on the page.  */
document.getElementById("phonenumber").innerHTML = myNumber;