Javascript通过ID获取元素并设置值

78

我有一个向其传递参数的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是动态的。我试过在$（document）.ready函数中添加它，但是没有用

javascript default-value

— 日本邮政
source

2

让我们看看在哪里调用该函数（从提供的代码来看，该函数没有名称）。

— 安东尼·格里斯

什么是变量？以及如何调用未命名函数？

— mplungjan

在执行诊断alert()或console.log()类似情况时，应始终用一些标记字符包装值，以便可以判断字符串中是否有杂散空格字符。所以：alert("[" + x + "], [" + y + "]");

— Pointy

请在jsfiddle.net上显示此情况的示例-您要问的内容并没有任何意义。

— 丹尼斯

73

如果在将textarea渲染到页面之前执行了myFunc（variable），则将出现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函数。希望对您有所帮助。

— 毛小丹
source

我创建了隐藏字段，然后创建了按钮，该按钮执行了设置隐藏字段值的功能。但是，ID是动态设置的。我尝试在$（document）.ready函数中添加此函数，但出现相同的问题。

— jpo

@jpo如果动态设置了ID，则还应确保在设置ID之后调用myFunc。您可以尝试在设置ID的函数中调用myFunc。

— Xiaodan Mao，

我的代码如下所示：@ Html.HiddenFor（m => m.myfield，new {id =“ myId”}）<input type =“ button” onclick =“ javascript：myFunc（myID）” value =“ button” /> 。

— jpo

仅在单击按钮时才调用该函数，并且仅在页面加载后才发生。在单击按钮之前，我还能如何确保一切都发生？

— jpo

@jpo在onclick =“ javascript：myFunc（myID）”中，myID应该用单引号引起来。

— Xiaodan Mao

23

给定

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

展开摘要

— mplungjan
source

正是我的想法。但是我的ID和动态设置。但是我使用了相同的想法。但是，当我调用函数时，文档找不到具有指定ID的元素

— jpo 2013年

我们需要查看html和事件处理程序（onclick或其他方法）

— mplungjan

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>

— 达·莫米（Dah Moymy）
source

2

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

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

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

您可以在这里尝试示例！

— 达伦·D。
source

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>

— 盘店
source

1

内联事件处理程序是不好的做法。

— jbabey 2013年

0

我认为问题在于您调用javascript函数的方式。您的代码如下：

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

myID应该用引号引起来。

— KI
source

2

该javascript:标签是完全没有必要的

— mplungjan

0

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

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

尽管此附录可能对原始提问者没有帮助，但实际上会更改页面源中值的内容，从而使值更新 form.reset()。

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

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

— 爱因·Prime
source