Question

以下内容未呈现我在Chrome或Firefox中可以看到的任何更改：

var field = document.getElementById( 'input-id' ), nodeName;

if ( field !== null ) {
    nodeName = field.nodeName.toLowerCase();

    if( nodeName === 'input' || nodeName === 'textarea' ) {
        field.value = 'hello';
        console.log( field.value );
    }
}

以下是目标：

<input id="input-id" name="input-name" type="text" required="required" placeholder="example">

但是控制台报告了两者中的正确值。为什么？我正在使用经过验证的HTML5。该脚本位于结束body标记之前。

Answer 1

您正在使用,而不是.编辑您的代码，mate：

var field = document.getElementById( 'input-id' ).nodeName;

Answer 2

由于您已经说明了以下情况，因此可能不是脚本加载问题：

该脚本位于结束正文标记之前。

您必须在页面上拥有多个具有相同id的元素。查看您的来源（Firefox上的 Ctrl + U ）并搜索 input-id 。确保页面上只有一个元素具有该ID。

您还可以通过在其他console.log电话中添加以下内容来记录要更改的元素：

console.log( field );

这应该将整个元素记录到控制台，并帮助您进一步调试。

Answer 3

试试这个

 $(function() {
        var field = document.getElementById( 'input-id' ), nodeName;
        if ( field !== null ) {
            nodeName = field.nodeName.toLowerCase();

            if( nodeName === 'input' || nodeName === 'textarea' ) {
                field.value = 'hello';
                console.log( field.value );
            }
        }
     });

或将您的脚本放在页面的末尾。

因为你的脚本在你的输入标签渲染之前正在执行它没有工作的原因。所以把它放在end或body load事件中，或者如果你使用jquery而不是放入文档就绪函数

Answer 4

您的脚本可能在输入元素之前加载。

尝试将代码段放在页面底部。

Answer 5

我认为您缺少添加onload function。您可以将其添加到<body>，如

<body onload="sumfunction();">

或在javascript中

<script>
    window.onload = sumfunction; 
</script>

以下是一个示例：http://jsbin.com/ezovun/1/edit

Answer 6

事实证明，在我使用OP中的代码设置后，我意外地将输入值覆盖到脚本中其他地方的空字符串。我的console.log位于它所在的位置，在覆盖之前抓取了该值，这就是为什么它报告了正确的值，尽管在浏览器中得到了不同的结果。我为没有发布整个脚本而道歉，但我试图提供一个简化的例子。

Javascript input.value更改未在浏览器中显示

6 个答案: