Java 脚本未定义的变量，基本的 html 表单

Java script undefined variable, basic html form

本文关键字：html 表单 变量 脚本 未定义 Java      更新时间：2023-09-26

我已经为此苦苦挣扎了大约一个小时，并重写了大约三次，我一生都无法弄清楚问题是什么，无论输入什么，除了名称字段之外的所有内容都将返回一个值，但是name将返回未定义。我已经看了很多次了，我已经复制+粘贴+修改了工作内容，我找不到一个错字......这是怎么回事？

Item Name: <input type="text" id="item_name" placeholder="Enter a price..."/> </br>
Item Price: <input type="text" id="item_price" placeholder="Enter a price..."/> </br>
Item Description: <input type="text" id="item_description" placeholder="Enter a description..."/> </br>
Item Image(link): <input type="text" id="item_image" placeholder="Enter a image link..."/> </br>
rsid: <input type="text" id="rs_item_id" placeholder="Enter a item id..."/> </br>
rsam: <input type="text" id="rs_item_amount" placeholder="Enter a item amount..."/> </br>
<button id="update">Update item</button>
<script>
    var name    = document.getElementById("item_name");
    var price   = document.getElementById("item_price");
    var desc    = document.getElementById("item_description");
    var img     = document.getElementById("item_image");
    var rsid    = document.getElementById("rs_item_id");
    var rsam    = document.getElementById("rs_item_amount");
    var button  = document.getElementById("update");
    button.addEventListener("click", function() {
        alert("Name = " + name.value + "'n" 
            + "Price = " + price.value + "'n" 
            + "Desc = " + desc.value + "'n" 
            + "Img = " + img.value + "'n" 
            + "rsid = " + rsid.value + "'n" 
            + "rsam = " + rsam.value + "'n");
    });
</script>

问题是，因为你把它们都变成了全局变量，所以name一个与window.name属性冲突。

使用不同的变量名称或创建闭包都可以

> 把name, price, desc, img, rsid, rsam放在事件处理程序中。

var button  = document.getElementById("update");
button.addEventListener("click", function() {
  var name    = document.getElementById("item_name");
  var price   = document.getElementById("item_price");
  var desc    = document.getElementById("item_description");
  var img     = document.getElementById("item_image");
  var rsid    = document.getElementById("rs_item_id");
  var rsam    = document.getElementById("rs_item_amount");

    alert("Name = " + name.value + "'n" 
        + "Price = " + price.value + "'n" 
        + "Desc = " + desc.value + "'n" 
        + "Img = " + img.value + "'n" 
        + "rsid = " + rsid.value + "'n" 
        + "rsam = " + rsam.value + "'n");
});

演示：http://jsbin.com/fivos/1/edit?html,output

相关文章：