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

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

HTML:

添加成分

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>

函数addItem（）{
var f=document.getElementsByName（“addFood”）[0]；
var x=document.getElementById（“度量”）.value；
var table=document.getElementById（“recipeItems”）；
var行=table.insertRow（0）；
var cell1=行插入单元格（0）；
var meas=document.createElement（“输入”）；
meas.type=“编号”；
测量值=x；
第1单元：儿童（meas）；
}

正如@Jonathan Lonowski所提到的，当您在表单中放置

按钮时，它将尝试提交表单，这将刷新页面或发布详细信息

如果您想坚持使用相同的HTML，那么可以添加

event.preventDefault();

在函数的顶部。这是小提琴：

参考：

否则，设置
type=“button”
也可以完成此工作。
此方法中未使用第一行，您在控制台中是否收到任何错误？看起来它可以工作。问题是什么？问题是，当我单击按钮时，动态创建的输入框会显示一秒钟，然后消失。当您单击
时，将提交
，这会导致页面导航到自身的新副本，
再次为空。为了避免提交，您可以使用按钮
type=“button”
。否则，脚本似乎工作正常。
event.preventDefault();