Menu
I have a javascript function to which I pass a parameter. The parameter represents the id of an element (a hidden field) in my web page. I want to change the value of this element.
function myFunc(variable){ var s= document.getElementById(variable); s.value = 'New value' } When I do this, I get an error that the value cannot be set because the object is null. But I know the object is not null because I see it in the html code generated by the browser. Anyways, I tried the following code to debug
function myFunc(variable){ var x = variable; var y = 'This-is-the-real-id' alert(x + ', ' + y) var s= document.getElementById(x); s.value = 'New value' } When the alert message shows up, both parameters are the same, but I still get the error. But everything works fine when I do
var s= document.getElementById('This-is-the-real-id'); s.value = 'New value' How can I fix this please
EDIT
The element for which I am setting the value is hidden field and the id is det dynamically, as the page loads. I have tried added this in the $(document).ready function but did not work
894
To get element by ID and set the value with JavaScript, we make sure the element is loaded before we try to set its value. to add an input. const setValue = (id, newValue) => { const s = document. getElementById(id); s.
The getElementById() method returns an element with a specified value. The getElementById() method returns null if the element does not exist. The getElementById() method is one of the most common methods in the HTML DOM. It is used almost every time you want to read or edit an HTML element.
getElementById() The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
IDs should be unique within a page, and all elements within a page should have an ID even though it is not necessary. You can add an ID to a new JavaScript Element or a pre-existing HTML Element.
If myFunc(variable) is executed before textarea is rendered to page, you will get the null exception error.
<html> <head> <title>index</title> <script type="text/javascript"> function myFunc(variable){ var s = document.getElementById(variable); s.value = "new value"; } myFunc("id1"); </script> </head> <body> <textarea id="id1"></textarea> </body> </html> //Error message: Cannot set property 'value' of null So, make sure your textarea does exist in the page, and then call myFunc, you can use window.onload or $(document).ready function. Hope it's helpful.
68
Given
<div id="This-is-the-real-id"></div> then
function setText(id,newvalue) { var s= document.getElementById(id); s.innerHTML = newvalue; } window.onload=function() { // or window.addEventListener("load",function() { setText("This-is-the-real-id","Hello there"); } will do what you want
Given
<input id="This-is-the-real-id" type="text" value=""> then
function setValue(id,newvalue) { var s= document.getElementById(id); s.value = newvalue; } window.onload=function() { setValue("This-is-the-real-id","Hello there"); } will do what you want
function setContent(id, newvalue) { var s = document.getElementById(id); if (s.tagName.toUpperCase()==="INPUT") s.value = newvalue; else s.innerHTML = newvalue; } window.addEventListener("load", function() { setContent("This-is-the-real-id-div", "Hello there"); setContent("This-is-the-real-id-input", "Hello there"); })<div id="This-is-the-real-id-div"></div> <input id="This-is-the-real-id-input" type="text" value="">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
