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.
- 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
valueproperty 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
6 Answers
Reset to default 1You 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