使用 javascript 的 addeventlistener 在单击按钮后更改输入文本的值

Question

我正在尝试使用 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>

Answer 1

问题出在这里：

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

看看上面的几行。您正在获取一个元素的值并将其存储到 text 但您随后尝试分配 text.value？考虑这种情况：

假设 input 当前的值为 "Apples"。正在做：

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

将 "Apples" 存储在 text 中。现在你可以：

text.value = "GMU";

由于 text 是一个字符串，而您尝试访问属性 value ，而字符串不存在，因此它不起作用 - 您已经访问了 value 属性太多次了。

现在 - 请注意，变量存储值而不是对元素值的引用，这意味着在上面的代码中， text 仅包含属性 value，它没有指向实际元素的值属性。因此，您需要像这样直接修改值属性：

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

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

您也可以将元素存储到变量中，然后执行 element.value = "val" 因为元素是一个对象，而对象具有指向内存的引用，因此当您分配给一个对象时，将分配引用并且它指向内存中的同一个位置。

Answer 2

要更改单击按钮时的输入文本，您可以在按钮上使用 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>

使用 javascript 的 addeventlistener 在单击按钮后更改输入文本的值

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

html

javascript

getelementbyid

addeventlistener