admin管理员组

文章数量:1429476

The following does not render any change I can see in Chrome or 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 );
    }
}

Here is the target:

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

But the console reports the correct value in both. Why? I am using validated HTML5. The script is before the closing body tag.

The following does not render any change I can see in Chrome or 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 );
    }
}

Here is the target:

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

But the console reports the correct value in both. Why? I am using validated HTML5. The script is before the closing body tag.

  • javascript
  • html
  • dom
Share Improve this question edited Jan 2, 2013 at 6:13 Hugh Guiney asked Jan 2, 2013 at 6:02 Hugh GuineyHugh Guiney 1,3692 gold badges20 silver badges34 bronze badges 4
  • 3 Works for me jsfiddle/uM3NP – Musa Commented Jan 2, 2013 at 6:06
  • May be console is not defined. Comment that line and check. Code seems to be working fine – Sree Commented Jan 2, 2013 at 6:18
  • === is this is issue ? can you change == and see? Might be assignment and type together is the issue ? – Sahal Commented Jan 2, 2013 at 6:21
  • @Sree Console is defined. As I said, it reports the correct value. The issue is the text field does not reflect the change visually—even though its value property does. @Sahal That’s just a parison operator with a strict type check. It wouldn’t have any effect on the value of the input. – Hugh Guiney Commented Jan 3, 2013 at 1:39
Add a ment  | 

6 Answers 6

Reset to default 1

You are using , instead of . Edit your code, mate:

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

Since you already state the following it probably isn't a script loading problem:

The script is before the closing body tag.

You must be having multiple elements with the same id on the page. View your source (Ctrl+U on Firefox) and do a search for input-id. Ensure only one element on the page has that id.

You can also log which element is being changed by adding the following line with your other console.log call:

console.log( field );

This should log the entire element to the console and help you to debug further.

Turns out I was accidentally overwriting the input value to the empty string elsewhere in the script, immediately after I set it with the code in the OP. My console.log, being in the place that it was, grabbed the value before it was overwritten, which is why it reported the correct value despite getting a different result in the browser. I apologize for not posting the entire script, but I was trying to offer a reduced example.

try this

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

or put your script at the end of the page.

Reason it is not working because your script is executing before your input tag render.so put it in end or on body load event or if your are using jquery than put in document ready function

Your script may be loading before your input element.

Try putting your snippet a the bottom of the page.

I think you're missing to add onload function. You can add it to <body> like

<body onload="sumfunction();">

or in javascript 

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

Here is an example : http://jsbin./ezovun/1/edit

本文标签： htmlJavascript inputvalue Change Not Displaying In BrowserStack Overflow

版权声明：本文标题：html - Javascript input.value Change Not Displaying In Browser - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745527955a2661925.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。