Question

这个脚本应该从带有id = measurement的表单元素中获取值，并且应该将其作为动态创建的输入的值放在表格单元格中。

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"也应该完成这项工作。

是什么让这个脚本不起作用？

1 个答案: