javascript - 当下拉菜单中的项目发生更改时填写输入字段(html，javascript)

Question

我正在尝试熟悉 javascript 以及如何将它与 html 一起使用。我想要做的非常简单，当下拉菜单 id 中的值发生更改时，例如用字符串填充输入字段。

这是 HTML:

<div>
    <input type="text" id="field_id" placeholder="Using..." style="width: 400px">
    <select style="width: 180px" onchange="Test()">
        <option value="" disabled selected>Select</option>
        {% for stuff in stuffs%}
        <option value="{{stuff}}">{{stuff}}</option>
        {% endfor %}                    
    </select>
</div>

以及同一文档中的 javascript:

<script>
    function Test()
    {
      document.getElementById(field_id).text = "asdsads";
    }   
</script>

为什么输入字段不会填充字符串“asdsads”？

Answer 1

您应该将参数作为字符串提供给 getElementById:

document.getElementById("field_id").value = "asdsads";

注意 field_id 周围的引号。

在您的代码中，field_id 是一个(未定义)变量。您应该在浏览器的 Javascript 控制台中看到错误/警告。

第二:要设置输入字段的值，您需要设置 value 属性，而不是 text 属性。

这是您的示例的有效 fiddle :https://jsfiddle.net/oapzL020/