86

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

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

当我这样做时，我收到一个错误，因为对象为空，所以无法设置该值。但我知道该对象不为空，因为我在浏览器生成的 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 是动态的。我已经尝试在 $(document).ready 函数中添加它，但没有奏效

4

7 回答 7

78

如果 myFunc(variable) 在 textarea 渲染到页面之前执行，你会得到 null 异常错误。

<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 函数。希望它有帮助。

于 2013-02-01T15:28:42.323 回答
25

给定

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

会做你想做的

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

于 2013-02-01T15:12:28.290 回答
4 
<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>
于 2014-06-05T03:10:01.740 回答
3

遇到这个问题，没有答案提出了使用.setAttribute()除了.value()

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

虽然对最初的提问者不太有帮助，但这个附录实际上改变了页面源中值的内容，这反过来使值更新form.reset()证明。

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

(Or me in half a year when I've forgotten about js quirks...)

于 2020-02-04T06:56:08.987 回答
2

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

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

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

您可以在这里尝试示例！

于 2019-04-02T16:38:58.953 回答
1

尝试像下面它会工作......

<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>
于 2013-02-01T15:15:56.783 回答
0

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

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

myID 应该用引号括起来。

于 2014-08-21T10:37:07.323 回答