使用javascript's addeventlistener改变点击按钮后输入文本的值

Changing value of input text after button click using javascript's addeventlistener

本文关键字：按钮 输入 文本 改变 javascript addeventlistener 使用      更新时间：2023-09-26

我试图通过使用JavaScript的按钮单击上的文本字段表单更改输入文本。我很难弄明白为什么它不工作。如有任何帮助，不胜感激。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title> </title>
    <script type="text/javascript">

    function start(){
        var button = document.getElementById("button");
        button.addEventListener("click", buttonPressed, false);
    }
    function buttonPressed(){
        var text = document.getElementById("textField").value;
        text.value = "GMU";
    }
    window.addEventListener("load", start, false);
    </script>
    </head>
    <body>
        <form>
            <input id="textField" type="text" value="">
            <input id="button" type="button" value="Button">
        </form>
    </body>
    </html>

问题在这里:

var text = document.getElementById("textField").value;
text.value = "GMU";

看一下上面的行。你正在获取一个元素的值并将其存储在text中，但是你试图分配text.value ?考虑这种情况:

假设input当前的值为"苹果"。做:

var text = document.getElementById("textField").value;

将"苹果"存储在text中。

text.value = "GMU";

由于text是字符串，并且您尝试访问不存在字符串的属性value，它不起作用-您已经多次访问value属性。

现在-注意变量存储值而不是引用元素的值，这意味着在上面的代码中，text只保存属性值，它没有指向实际元素的value属性。因此，您需要像这样直接修改value属性: 
document.getElementById("textField").value = "GMU";

之所以有效，是因为您修改了元素本身的属性，而不是将其复制到变量中。

你可以选择将元素存储到一个变量中，并执行element.value = "val"，因为元素是一个对象，而对象有指向内存的引用，所以当你给一个对象赋值时，引用被赋值，并且它指向内存中的同一个位置。

要更改按钮单击上的输入文本，您可以在按钮上使用addEventListener。然后，您可以在此之后更改输入字段。

var button = document.getElementById("button");
var text = document.getElementById("textField");
button.addEventListener('click', function() {
  text.value = "GMU";  
});
<form>
  <input id="textField" type="text" value="">
  <input id="button" type="button" value="Button">
</form>

相关文章：