表单中的表格中的功能按钮

时间:2015-11-09 15:50:57

标签: javascript html forms html-table

我正在建立一个网站,我已经完成了,但代码中有一个相当大的错误。我创建了一个表,其中有一个按钮,它是一个计算某个表达式的函数,并在表中显示计算结果。计算发生但不显示在表格中。这就是我所拥有的:



<!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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

您正在使用InnerHTML(大写字母I),这是错误的。 正确的功能是.innerHTML

此外,如果您不希望按钮发布表单,则应添加type="button"

更多详情:http://www.newtonsoft.com/json

答案 1 :(得分:0)

您的代码中有一个小错字。您正在使用InnerHTML,但正确的拼写是innerHTML,并且小写&#39; i&#39;。这里是innerHTML的描述:https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML。这是你的固定演示:

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

文档更改后页面会刷新,因此它会更改您的值,但会将其更改回原始值。您需要找到一个不同的位置来运行fillitin()然后文档完成加载。类似于jquery $(document).ready()

的东西