Javascript input.value Change Not Displaying In Browser

Question

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.

May be console is not defined. Comment that line and check. Code seems to be working fine — Sree
– 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
– 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 comparison operator with a strict type check. It wouldn’t have any effect on the value of the input. — Hugh Guiney
– Hugh Guiney, Commented Jan 3, 2013 at 1:39

Derek 朕會功夫 · Accepted Answer · 2013-01-02 06:06:09Z

1

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

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

edited Jan 2, 2013 at 6:06

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Jan 2, 2013 at 6:04

Nipun Jain

6014 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hugh Guiney Over a year ago

No, I'm setting up a variable called nodeName in advance of assigning a value to it.

Tanzeel Kazi · Accepted Answer · 2013-01-02 06:34:44Z

1

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.

answered Jan 2, 2013 at 6:34

Tanzeel Kazi

3,8371 gold badge20 silver badges22 bronze badges

2 Comments

Hugh Guiney Over a year ago

I’ve done this. It points to the right element. There’s nothing else with that id.

Tanzeel Kazi Over a year ago

@HughGuiney Make a JS fiddle with the js and html in question so we can see the issue in action.

Hugh Guiney · Accepted Answer · 2013-01-03 03:33:15Z

1

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.

answered Jan 3, 2013 at 3:33

Hugh Guiney

1,3792 gold badges20 silver badges34 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-01-02 06:12:03Z

0

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

answered Jan 2, 2013 at 6:12

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

1 Comment

Hugh Guiney Over a year ago

My script is before the closing body tag.

rgin · Accepted Answer · 2013-01-02 06:14:03Z

0

Your script may be loading before your input element.

Try putting your snippet a the bottom of the page.

answered Jan 2, 2013 at 6:14

rgin

2,3014 gold badges24 silver badges33 bronze badges

Comments

OammieR · Accepted Answer · 2013-01-02 06:24:51Z

0

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.com/ezovun/1/edit

answered Jan 2, 2013 at 6:24

OammieR

2,8905 gold badges32 silver badges52 bronze badges

Collectives™ on Stack Overflow

Javascript input.value Change Not Displaying In Browser

6 Answers 6

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related