Question

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

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

当我这样做时，我收到一个错误，即由于对象为null，因此无法设置该值。但我知道该对象不是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是动态det。我试过在$（document）.ready函数中添加了这个但是没有工作

Answer 1

如果在将textarea呈现到页面之前执行myFunc（变量），则会出现空异常错误。

<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

因此，请确保您的textarea确实存在于页面中，然后调用myFunc，您可以使用window.onload或$（document）.ready函数。希望它有用。

Answer 2

鉴于

<div id="This-is-the-real-id"></div>

然后

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

会做你想做的事

鉴于

<input id="This-is-the-real-id" type="text" value="">

然后

function setValue(id,newvalue) {
  var s= document.getElementById(id);
  s.value = newvalue;
}    
window.onload=function() {
  setValue("This-is-the-real-id","Hello there");
}

会做你想做的事

Answer 3

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

Answer 4

尝试如下，它将起作用...

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

Answer 5

我认为问题在于你调用javascript函数的方式。你的代码是这样的：

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

myID应该用引号括起来。

Answer 6

对于每种元素类型，可以使用特定的属性来设置值。例如：

<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!

Answer 7

遇到这个问题，除了.setAttribute()

之外，没有答案带来了使用.value()的可能性。

document.getElementById('some-input').value="1337";
document.getElementById('some-input').setAttribute("value", "1337");

尽管对于原始提问者来说不太可能有所帮助，该附录实际上更改了页面源中值的内容，进而使值更新为form.reset()-证明。

我希望这可以帮助其他人。

（或者半年后我忘了js怪癖...）

Javascript按ID获取元素并设置值

7 个答案: