通过Id获取元素并在JavaScript中设置值

mwg9r5ms 于 2023-03-21 发布在 Java

关注(0)|答案(7)|浏览(263)

我有一个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是动态设置的，当页面加载时。我尝试在 $（document）.ready 函数中添加它，但它不起作用。

JavaScript

来源：https://stackoverflow.com/questions/14649173/get-element-by-id-and-set-the-value-in-javascript

7条答案

按热度按时间

chhqkbe11#

如果在文本区域渲染到页面之前执行 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 -->

因此，请确保您的文本区域确实存在于页面上，然后调用 myFunc。您可以使用 window.onload 或 $（document）.ready 函数。

赞(0）回复(0）举报 2023-03-21

tcbh2hod2#

给定

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

赞(0）回复(0）举报 2023-03-21

eqfvzcg83#

没有回答提出除了.value()之外还可以使用.setAttribute()的可能性：

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

这个附录实际上改变了页面源中值的内容，这反过来又使值更新form.reset()-proof。

赞(0）回复(0）举报 2023-03-21

bxjv4tth4#

用途：

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

赞(0）回复(0）举报 2023-03-21

agyaoht75#

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

<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 the example here!

赞(0）回复(0）举报 2023-03-21

1u4esq0p6#

像下面这样试试。它会工作的...

<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）回复(0）举报 2023-03-21

qeeaahzv7#

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

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

myID* 应该用引号括起来。

赞(0）回复(0）举报 2023-03-21

我来回答

通过Id获取元素并在JavaScript中设置值

7条答案

相关问题

热门标签

最新问答