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

Javascript input.value Change Not Displaying In Browser

本文关键字：浏览器 显示 input value Change Javascript      更新时间：2023-09-26

以下内容没有显示我在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标记之前。

您使用的是,而不是.编辑您的代码，伙计：

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

由于您已经声明了以下内容，这可能不是脚本加载问题：

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

页面上必须有多个具有相同id的元素。查看您的源代码(在Firefox上Ctrl+U(并搜索输入id。确保页面上只有一个元素具有该id。

您还可以通过在其他console.log调用中添加以下行来记录正在更改的元素：

console.log( field );

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

尝试这个

 $(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 );
            }
        }
     });

或者把你的脚本放在页面的末尾。

原因是它不起作用，因为您的脚本在您的输入标记render之前执行。所以将它放在end或body load事件中，或者如果您正在使用jquery，则将其放在文档就绪函数中

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

试着把你的片段放在页面底部。

我认为您缺少添加onload function。你可以像一样将其添加到<body>

<body onload="sumfunction();">

或在javascript 中

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

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

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

相关文章：