什麼使這個腳本不起作用？

Question

這個腳本應該從id = measure的表單元素中獲取值，並且應該把它作爲一個動態創建的輸入值放入一個表格單元格中。

HTML：

<form name="addFood"> 
<input type="number" name="measurement" id="measurement" size="20" style="width:30px"> 
<button id="button" onclick="addItem()">Add Ingredient</button> 
</form> 

<table id="recipeItems"> 
</table> 

的Javascript：

<script> 
     function addItem(){ 
      var f = document.getElementsByName("addFood")[0]; 
      var x = document.getElementById("measurement").value; 

      var table = document.getElementById("recipeItems"); 
      var row = table.insertRow(0); 

      var cell1 = row.insertCell(0); 
      var meas = document.createElement("input"); 
      meas.type="number"; 
      meas.value=x; 
      cell1.appendChild(meas); 
     } 
     </script> 

Answer 1

由於@Jonathan Lonowski提到的，​​當你把button的形式，它會嘗試提交表單，這將刷新頁面或發佈細節。

如果你想堅持到相同的HTML，那麼你可以添加

event.preventDefault(); 

頂部的功能。這裏是小提琴：https://jsfiddle.net/t9fh989p/1/

請參閱：https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault。

否則，設置type="button"也應該完成這項工作。