Introduction to DOM
<!DOCTYPE html> <html> <head> <title>Multiply</title> <meta charset="utf-8"> </head> <body> <h1>Multiply two numbers taken in through prompts</h1> <div id="onlyAns"></div> <div id="putHere"></div> <script type="text/javascript"> var ans = 0; var firstnum = 0; var secondnum = 0; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); ans = firstnum * secondnum; document.getElementById('onlyAns').innerHTML = ans + "<br>"; document.getElementById('putHere').innerHTML = "The answer is " + ans; </script> </body> </html> The getElementById() method with .innerHTML returns the HTML content (defined as the innerHTML) of an element. So I set up a <div with an id that contains the name of the place I want to put the HTML that is returned. In my first getElementByID(‘onlyAns’) the innerHTML returns the ans and the break. The answer was firstnum multiplied by secondnum or with my entries 12 times 6 and so the answer was 72 and it now shows in the <div> with the id of onlyAns. In my second example I concatenate a literal with ans and that concatenation is what appears in the second <div>.
Note that I have a <div> (could be a <p>) where I h <!DOCTYPE html> <html> <head> <title>Decision</title> <meta charset="utf-8"> <style type="text/css"> h1 { text-align:center; } </style> </head> <body> <h1>Results</h1> <div id="rslt"></div> <script type="text/javascript"> var ans = 0; var firstnum = 0; var secondnum = 0; var whattodo; firstnum = prompt("Enter the first number",0); secondnum = prompt("Enter the second number",0); whattodo = prompt("Enter * or /",""); if (whattodo == "*") ans = firstnum * secondnum; else if (whattodo == "/") ans = firstnum / secondnum; ans = "Problem"; document.getElementById("rslt").innerHTML = "The answer is " + ans; </script> </body> </html> Note that I have a <div> (could be a <p>) where I h ave an Id of rslt. This is where the result of my getElementByID(“rs;t”).innerHTML will be placed.
When you run this program, Notice the h2 style. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Decision</title> <style type="text/css"> body { background-color: beige; color: brown; } h1 text-align: center; h2 margin-left: 500px; width: 400px; background-color: #66CC99; border-style: dotted; border-color: brown; </style> </head> When you run this program, Notice the h2 style.
The msg will go to the <h2> with an id of prize. <body> <h1>Loop followed by a decision</h1> <p>This is a JavaScript program that prompts the user for input. I have inserted some alert() commands in here to show the programmer the progression through the program. This is an excellent debugging tool. It things are not working the way you want them to, put in an alert() and see what is really happening.</p> <h2 id="prize"></h2> <script type="text/javascript"> var inputPoints; var totalPoints = 0; var msg; var ct = 1; while (ct <= 3) { alert("ct at beginning of loop " + ct); inputPoints = prompt("Enter the number of points you have earned",0); totalPoints = parseInt(totalPoints) + parseInt(inputPoints); alert("totalPoints after add " + totalPoints); ct = parseInt(ct) + 1; } if (totalPoints < 10) msg = "Not enough points for a prize"; else if (totalPoints <= 50) msg = "You can choose a prize from group B"; msg = "You can choose a prize from group A"; document.getElementById("prize").innerHTML = msg; </script> </html> The output will go here The script goes through a loop to take in information and add it to a total. It uses alerts to show the execution. The msg will go to the <h2> with an id of prize.
Output from the mathfact scripts.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is a math facts program</title> </head> <body> <h2>Math Facts</h2> <div id="facts"></div> <script type="text/javascript"> var ct = 1; var ctin; var inHtml; while (ct <= 3) { ctin = 1; while (ctin <= 3) inHtml = document.getElementById("facts").innerHTML; ans = ct + ctin; msg = inHtml + ct + "+" + ctin + "=" + ans + "<br>"; document.getElementById("facts").innerHTML = msg; ctin = ctin + 1; } ct = ct + 1; </script> <h2>The end of the math facts</h2> </body> </html> This has an embedded loop that handles the two numbers being added. The outer loop controls the first number and the innerloop controls the second number (ctin). I must set it all up to write as one line in the <div> with the id of facts so I keep adding something to what is already in inHtml. I am going to use some alerts so you can watch. I suggest you also insert the alerts and watch the processing.
The alert shown results in the images on the next few pages. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is a math facts program</title> </head> <body> <h2>Math Facts</h2> <div id="facts"></div> <script type="text/javascript"> var ct = 1; var ctin; var inHtml; while (ct <= 3) { ctin = 1; while (ctin <= 3) inHtml = document.getElementById("facts").innerHTML; alert(inHtml); ans = ct + ctin; msg = inHtml + ct + "+" + ctin + "=" + ans + "<br>"; document.getElementById("facts").innerHTML = msg; ctin = ctin + 1; } ct = ct + 1; </script> <h2>The end of the math facts</h2> </body> </html> The alert shown results in the images on the next few pages. I am stringing the output together by adding to what is inHtml each pass and using <br> to put it on separate lines. Be sure to look at the second example, I think it is a little clearer.
And finally the next to the last one. And when I click for the last time I get the results.
In the inner loop I calculate ans and <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is a math facts program</title> </head> <body> <h2>Math Facts</h2> <div id="facts"></div> <script type="text/javascript"> var ct = 1; var ctin; var msg; msg = document.getElementById("facts").innerHTML; alert(msg); while (ct <= 3) { ctin = 1; while (ctin <= 3) ans = ct + ctin; msg = msg + ct + "+" + ctin + "=" + ans + "<br>"; ctin = ctin + 1; } ct = ct + 1; document.getElementById("facts").innerHTML = msg; </script> <h2>The end of the math facts</h2> </body> </html> In the inner loop I calculate ans and then add to msg which the first pass is empty. The alert shows the result. Then I loop back, calculate ans again and add it to the one fact already in message. Now there are two. After each change to msg, I put out an alert. The alert is in a different place in the code, so I see the last fact.
The output continues like the last example.