2015-11-09 95 views
0

我正在建立一個網站,我已經完成了,但代碼中有一個很大的錯誤。我創建了一個表格,其中有一個按鈕,它是計算某個表達式並將計算結果顯示在表格中的函數。計算髮生但不顯示在表格中。以下是我有:一個表格中的功能按鈕

<!DOCTYPE html> 
 
<html> 
 
<!--DB 11/2/2015--> 
 
<!-- W3 Schools was referenced in building this code--> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Assignment 8</title> \t 
 
\t <link href="images/avatar.png" rel="shortcut icon" type="image/png"> 
 
\t <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> 
 
\t <script src="js/javascript.js" type="text/javascript"></script> 
 
\t <style type="text/css"> 
 
\t </style> 
 
\t 
 
</head> 
 
<body onload="fillitin()"> 
 
<header> 
 
</header> 
 
<aside> 
 
</aside> 
 
<div id="main"> 
 

 
\t \t 
 
<h1> Assignment 8: Operators and Expression</h1> 
 
<br> 
 
<p id="demo"></p> \t 
 
<script> 
 

 

 
\t var d = new Date(); 
 
\t months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December'] 
 
\t var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear(); 
 
\t 
 
\t 
 
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> 
 
\t <td> <br> 
 
    \t \t <input type="text" id="num1" value="1"> 
 
    \t </td> 
 
\t <td> 
 
\t \t <button onclick="myFunction()">Serves</button> 
 
\t </td> 
 
\t 
 
</tr> 
 
</form> 
 
<tr> 
 
\t <td id="M"></td> 
 
\t <td>Large Marshmallows</td> 
 
</tr> 
 
<tr> 
 
\t <td id="G"></td> 
 
\t <td>Graham Cracker</td> 
 
</tr> 
 
<tr> 
 
\t <td id="C"></td> 
 
\t <td>Ounches Chocolate</td> 
 
</tr> 
 

 
</table> 
 
<script> 
 
\t function fillitin() { 
 
\t document.getElementById("M").InnerHTML="1"; 
 
\t document.getElementById("G").InnerHTML="1"; 
 
\t document.getElementById("C").InnerHTML="1.5"; 
 
\t } 
 
\t 
 
\t function myFunction() { 
 
\t var x=document.getElementById("num1").value; 
 
\t document.getElementById("M").InnerHTML=x; 
 
\t document.getElementById("G").InnerHTML=x; 
 
\t document.getElementById("C").InnerHTML=x*1.5; 
 

 

 
\t } 
 
\t </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> 
 

 

 

 

 

 
\t <img alt="picture of smores" height="129" src="images/picture1.jpg" width="194"> 
 
\t <cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/ 
 
\t \t \t \t \t \t \t </a></cite> 
 
\t </div> 
 
<footer> 
 
</footer> 
 
</body> 
 
</html>

+0

您有一些錯誤,https://validator.w3.org/nu/會顯示 – Quentin

+0

* alt =「圖片的smores」* - 去閱讀http://www.alanflavell。 org.uk/alt/alt-text.html – Quentin

+0

就像他們說的,將InnerHTML改爲innerHTML。由於這是客戶端計算,因此您不需要'form'標記。無論如何你的作品。 – alix

回答

1

您使用InnerHTML(大寫我),這是錯誤的。 右功能.innerHTML


另外,如果你不希望按鈕發佈形式,就應該將其添加type="button"

更多細節:Can I make a button not submit a form

+0

完美,謝謝。 –

0

你有輕微的錯字在你的代碼中。您正在使用InnerHTML,但正確的拼寫爲innerHTML,並帶有小寫'i'。以下是關於innerHTML的描述:https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML。這裏是你的固定演示:

<!DOCTYPE html> 
 
<html> 
 
<!--DB 11/2/2015--> 
 
<!-- W3 Schools was referenced in building this code--> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Assignment 8</title> \t 
 
\t <link href="images/avatar.png" rel="shortcut icon" type="image/png"> 
 
\t <link href="css/stylesheet.css" rel="stylesheet" type="text/css"> 
 
\t <script src="js/javascript.js" type="text/javascript"></script> 
 
\t <style type="text/css"> 
 
\t </style> 
 
\t 
 
</head> 
 
<body onload="fillitin()"> 
 
<header> 
 
</header> 
 
<aside> 
 
</aside> 
 
<div id="main"> 
 

 
\t \t 
 
<h1> Assignment 8: Operators and Expression</h1> 
 
<br> 
 
<p id="demo"></p> \t 
 
<script> 
 

 

 
\t var d = new Date(); 
 
\t months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December'] 
 
\t var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear(); 
 
\t 
 
\t 
 
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> 
 
\t <td> <br> 
 
    \t \t <input type="text" id="num1" value="1"> 
 
    \t </td> 
 
\t <td> 
 
\t \t <button onclick="myFunction()">Serves</button> 
 
\t </td> 
 
\t 
 
</tr> 
 
</form> 
 
<tr> 
 
\t <td id="M"></td> 
 
\t <td>Large Marshmallows</td> 
 
</tr> 
 
<tr> 
 
\t <td id="G"></td> 
 
\t <td>Graham Cracker</td> 
 
</tr> 
 
<tr> 
 
\t <td id="C"></td> 
 
\t <td>Ounches Chocolate</td> 
 
</tr> 
 

 
</table> 
 
<script> 
 
\t function fillitin() { 
 
\t document.getElementById("M").innerHTML="1"; 
 
\t document.getElementById("G").innerHTML="1"; 
 
\t document.getElementById("C").innerHTML="1.5"; 
 
\t } 
 
\t 
 
\t function myFunction() { 
 
\t var x=document.getElementById("num1").value; 
 
\t document.getElementById("M").innerHTML=x; 
 
\t document.getElementById("G").innerHTML=x; 
 
\t document.getElementById("C").innerHTML=x*1.5; 
 

 

 
\t } 
 
\t </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> 
 

 

 

 

 

 
\t <img alt="picture of smores" height="129" src="images/picture1.jpg" width="194"> 
 
\t <cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/ 
 
\t \t \t \t \t \t \t </a></cite> 
 
\t </div> 
 
<footer> 
 
</footer> 
 
</body> 
 
</html>

+0

任何想法爲什麼在瀏覽器中點擊該功能後,它會回到原來的位置? –

0

頁面刷新,一旦文件被更改,以便它改變你的價值觀,但隨後改變了他們回到原來的。您需要找到一個不同的地方來運行fillitin(),然後在文檔完成加載時。類似於jquery $(document).ready()