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
This question is related to
javascript
default-value
try like 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>
For each element type, you can use specific attribute to set value. E.g.:
<div id="theValue1"></div>
window.document.getElementById("theValue1").innerText = "value div";
<input id="theValue2"></input>
window.document.getElementById("theValue2").value = "value input";
Coming across this question,
no answer brought up the possibility of using .setAttribute()
in addition to .value()
document.getElementById('some-input').value="1337";
document.getElementById('some-input').setAttribute("value", "1337");
Though unlikely helpful for the original questioner,
this addendum actually changes the content of the value in the pages source,
which in turn makes the value update form.reset()
-proof.
I hope this may help others.
(Or me in half a year when I've forgotten about js quirks...)
<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>
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) {_x000D_
var s = document.getElementById(id);_x000D_
if (s.tagName.toUpperCase()==="INPUT") s.value = newvalue;_x000D_
else s.innerHTML = newvalue;_x000D_
_x000D_
}_x000D_
window.addEventListener("load", function() {_x000D_
setContent("This-is-the-real-id-div", "Hello there");_x000D_
setContent("This-is-the-real-id-input", "Hello there");_x000D_
})
_x000D_
<div id="This-is-the-real-id-div"></div>_x000D_
<input id="This-is-the-real-id-input" type="text" value="">
_x000D_
I think the problem is the way you call your javascript function. Your code is like so:
<input type="button" onclick="javascript: myFunc(myID)" value="button"/>
myID should be wrapped in quotes.
Source: Stackoverflow.com