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 ，它没有指向实际元素的value属性。因此，您需要直接修改value属性，如下所示：

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

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

您也可以将元素存储到变量中，然后执行element.value = "val"因为元素是一个对象，并且对象具有指向内存的引用，所以当您指定一个对象时，会指定引用并指向它到记忆中的同一个地方。

Answer 2

要更改按钮单击时的输入文本，您只需使用按钮上的addEventListener即可。然后你可以在那之后改变输入字段。

＆＃13;

var button = document.getElementById("button");
var text = document.getElementById("textField");

button.addEventListener('click', function() {
  text.value = "GMU";  
});

＆＃13;

<form>
  <input id="textField" type="text" value="">
  <input id="button" type="button" value="Button">
</form>

＆＃13;

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

2 个答案: