Javascript按ID获取元素并设置值

问题描述 投票:62回答:6

我有一个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函数中添加了这个但是没有用

javascript default-value
6个回答
61
投票

如果在textarea呈现为页面之前执行myFunc(变量),则会出现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函数。希望它有用。


21
投票

特定

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

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>

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>

0
投票

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

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

myID应该用引号括起来。


0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.