A function button in a table in a form
Question
I'm building a website and I have it done but there is a pretty big bug in the code. I created a table in which I have a button that is a function to calculate some expression and have the calculations display in the table. The calculations happen but do not display in the table. Here is what I have:
<!DOCTYPE html> <html> <!--DB 11/2/2015--> <!-- W3 Schools was referenced in building this code--> <head> <meta charset="utf-8"> <title>Assignment 8</title> <link href="images/avatar.png" rel="shortcut icon" type="image/png"> <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> <script src="js/javascript.js" type="text/javascript"></script> <style type="text/css"> </style> </head> <body onload="fillitin()"> <header> </header> <aside> </aside> <div id="main"> <h1> Assignment 8: Operators and Expression</h1> <br> <p id="demo"></p> <script> var d = new Date(); months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December'] var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear(); document.getElementById("demo").innerHTML = date; </script> <h2 style="text-align:center"> S'mores!</h2> <h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4> <table style="width:50%" border="1"> <form name="myform" method=""> <tr> <td> <br> <input type="text" id="num1" value="1"> </td> <td> <button onclick="myFunction()">Serves</button> </td> </tr> </form> <tr> <td id="M"></td> <td>Large Marshmallows</td> </tr> <tr> <td id="G"></td> <td>Graham Cracker</td> </tr> <tr> <td id="C"></td> <td>Ounches Chocolate</td> </tr> </table> <script> function fillitin() { document.getElementById("M").InnerHTML="1"; document.getElementById("G").InnerHTML="1"; document.getElementById("C").InnerHTML="1.5"; } function myFunction() { var x=document.getElementById("num1").value; document.getElementById("M").InnerHTML=x; document.getElementById("G").InnerHTML=x; document.getElementById("C").InnerHTML=x*1.5; } </script> <ul> <li> Heat the marshmallow over an open flame until it begins to brown and melt. </li> <li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li> <li>Enjoy! Don't burn your mouth!</li> </ul> <img alt="picture of smores" height="129" src="images/picture1.jpg" width="194"> <cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/ </a></cite> </div> <footer> </footer> </body> </html>
3 answers
solution1
1 ACCPTED 2015-11-09 15:57:37
You're using InnerHTML (capital I) which is wrong. The right function is .innerHTML
Also, if you don't want the button to post the form, you should add it type="button"
More details : Can I make a button not submit a form
solution2
0 2015-11-09 15:59:25
You have a slight typo in your code. You're using InnerHTML , but the correct spelling is innerHTML with a lowercase 'i'. Here's a description of innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML . And here's your fixed demo:
<!DOCTYPE html> <html> <!--DB 11/2/2015--> <!-- W3 Schools was referenced in building this code--> <head> <meta charset="utf-8"> <title>Assignment 8</title> <link href="images/avatar.png" rel="shortcut icon" type="image/png"> <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> <script src="js/javascript.js" type="text/javascript"></script> <style type="text/css"> </style> </head> <body onload="fillitin()"> <header> </header> <aside> </aside> <div id="main"> <h1> Assignment 8: Operators and Expression</h1> <br> <p id="demo"></p> <script> var d = new Date(); months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December'] var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear(); document.getElementById("demo").innerHTML = date; </script> <h2 style="text-align:center"> S'mores!</h2> <h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4> <table style="width:50%" border="1"> <form name="myform" method=""> <tr> <td> <br> <input type="text" id="num1" value="1"> </td> <td> <button onclick="myFunction()">Serves</button> </td> </tr> </form> <tr> <td id="M"></td> <td>Large Marshmallows</td> </tr> <tr> <td id="G"></td> <td>Graham Cracker</td> </tr> <tr> <td id="C"></td> <td>Ounches Chocolate</td> </tr> </table> <script> function fillitin() { document.getElementById("M").innerHTML="1"; document.getElementById("G").innerHTML="1"; document.getElementById("C").innerHTML="1.5"; } function myFunction() { var x=document.getElementById("num1").value; document.getElementById("M").innerHTML=x; document.getElementById("G").innerHTML=x; document.getElementById("C").innerHTML=x*1.5; } </script> <ul> <li> Heat the marshmallow over an open flame until it begins to brown and melt. </li> <li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li> <li>Enjoy! Don't burn your mouth!</li> </ul> <img alt="picture of smores" height="129" src="images/picture1.jpg" width="194"> <cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/ </a></cite> </div> <footer> </footer> </body> </html>
solution3
0 2015-11-09 18:30:59
The page refreshes once the document is changed so it does change your values but then it changes them back to the original. you need to find a different place to run the fillitin() then when the document finishes loading. something similar to the jquery $(document).ready()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.