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>

You have some errors that https://validator.w3.org/nu/ would reveal — Quentin, Nov 09 '15 at 15:59
*alt="picture of smores"* — go and read http://www.alanflavell.org.uk/alt/alt-text.html — Quentin, Nov 09 '15 at 16:00
Like they said, change `InnerHTML` to `innerHTML`. And since this is a client side calculation you don't need `form` tag there. your works anyway. — alioguzhan, Nov 09 '15 at 16:06
I fixed that but I think i do need the form because I want the viewer of the site to be able to enter the amount of servings they want. I fixed the Inner to inner but for some reason when viewed in a web broswer when I click the serve button to calculate the new ingredient, it loops back to the orginal numbers — David Bailey, Nov 09 '15 at 16:08
You can have `input` without having a `form`. Also, you need to add `type="button"` on you ``. Check the link in my answer for more informations. — pistou, Nov 09 '15 at 16:31
you said it does calculate it just doesnt assign it. does the initial assignment by the fillitin() function work? — Binvention, Nov 09 '15 at 18:19

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

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

edited May 23 '17 at 11:44

Community

1
1

answered Nov 09 '15 at 15:57

pistou

2,799
5
33
60

score 0 · Answer 2 · answered Nov 09 '15 at 15:59

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>

Any idea why in a browser it loops back to the original after clicking on the function? — David Bailey, Nov 09 '15 at 16:04

score 0 · Answer 3 · answered Nov 09 '15 at 18:30

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()

A function button in a table in a form

3 Answers3