Best IT Recipes

Javascript Get item by id and set value

I have a javascript function with which I pass a parameter. The parameter represents the identifier of the element (hidden field) on 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 could not be set because the object is null. But I know that the object is not null, because I see it in the HTML code generated by the browser. Anyway, I tried the following code for debugging

 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 a warning message appears, both options are the same, but I still get the error message. 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 set the value is a hidden field, and the identifier is determined dynamically when the page loads. I tried adding this to the $ (document) .ready function, but didn't work

+63
javascript default-value
Feb 01 '13 at 15:07
source share
6 answers

If myFunc (variable) is executed before textarea is displayed on the page, you will get an error with zero exception.

 <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 text field exists on the page and then myFunc is called, you can use the window.onload or $ (document) .ready function. Hope this will be helpful.

+59
Feb 01 '13 at 15:28
source share

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="">
+20
Feb 01 '13 at 15:12
source share
 <html> <head> <script> function updateTextarea(element) { document.getElementById(element).innerText = document.getElementById("ment").value; } </script> </head> <body> <input type="text" value="Enter your text here." id = "ment" style = " border: 1px solid grey; margin-bottom: 4px;" onKeyUp="updateTextarea('myDiv')" /> <br> <textarea id="myDiv" ></textarea> </body> </html>
+4
Jun 05 '14 at 3:10
source share

try as below, it will work ...

 <html> <head> <script> function displayResult(element) { document.getElementById(element).value = 'hi'; } </script> </head> <body> <textarea id="myTextarea" cols="20"> BYE </textarea> <br> <button type="button" onclick="displayResult('myTextarea')">Change</button> </body> </html>
+1
Feb 01 '13 at 15:15
source share

I think the problem is how you call your javascript function. Your code looks like this:

 <input type="button" onclick="javascript: myFunc(myID)" value="button"/>

myID must be enclosed in quotation marks.

0
Aug 21 '14 at 10:37
source share

For each item type, you can use a specific attribute to set the value. For example:

 <div id="theValue1"></div> window.document.getElementById("theValue1").innerText = "value div"; <input id="theValue2"></input> window.document.getElementById("theValue2").value = "value input";

You can try an example here!

0
Apr 02 '19 at 16:38 on
source share


More articles:


All Articles