通过 Id 获取元素并设置值

我有一个传递参数的 javascript 函数。该参数表示我的网页中一个元素(一个隐藏字段)的 id。我想改变这个元素的值。

function myFunc(variable){
var s= document.getElementById(variable);
s.value = 'New value'
}

当我这样做时，我得到一个错误，该值无法设置，因为对象为空。但是我知道这个对象不是 null，因为我在浏览器生成的 html 代码中看到了它。 不管怎样，我尝试了下面的代码来调试

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'
}

当出现警报消息时，两个参数都是相同的，但我仍然得到错误。但只要我这么做，一切都会好起来的

  var s= document.getElementById('This-is-the-real-id');
s.value = 'New value'

请问我该怎么办

剪辑

我为其设置值的元素是隐藏字段，id 在页面加载时被动态设置。我已经尝试在 $(文档)中添加这个。准备功能，但没有工作

574872 次浏览
小开

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="">

小开

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>
小开
最佳答案

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.

小开 
<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>
小开

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.

小开

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";

You can try example here!

小开

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...)


提交答案