Javascript 通過 Id 獲取元素並設置值

Question

我有一個 javascript function ，我向其傳遞了一個參數。 該參數表示我的 web 頁面中一個元素（隱藏字段）的 id。 我想改變這個元素的值。

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

當我這樣做時，我收到一個無法設置值的錯誤，因為 object 是 null。 但我知道 object 不是 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 function 中添加這個但沒有用

Answer 1

如果在將 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 函數。 希望它有幫助。

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

會做你想做的

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

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

對於每種元素類型，您可以使用特定的屬性來設置值。 例如：

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

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

您可以在此處嘗試示例！

Answer 5

遇到這個問題，除了.value()之外，沒有答案提出使用.setAttribute()的可能性

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

盡管對原始提問者不太可能有幫助，但此附錄實際上更改了頁面源中值的內容，從而使值更新form.reset() -proof。

我希望這可以幫助其他人。

（或者半年之后我忘記了js的怪癖……）

Answer 6

像下面這樣嘗試它會起作用......

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

我認為問題在於您調用 javascript 函數的方式。 你的代碼是這樣的：

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

myID 應該用引號括起來。

Javascript 通過 Id 獲取元素並設置值

問題描述

7 個解決方案

解決方案1
73 已采納 2013-02-01 15:28:42

解決方案2
24 2013-02-01 15:12:28

解決方案3
4 2014-06-05 03:10:01

解決方案4
2 2019-04-02 16:38:58

解決方案5
2 2020-02-04 06:56:08

解決方案6
1 2013-02-01 15:15:56

解決方案7
0 2014-08-21 10:37:07

Javascript 通過 Id 獲取元素並設置值

問題描述

7 個解決方案

解決方案1 73 已采納 2013-02-01 15:28:42

解決方案2 24 2013-02-01 15:12:28

解決方案3 4 2014-06-05 03:10:01

解決方案4 2 2019-04-02 16:38:58

解決方案5 2 2020-02-04 06:56:08

解決方案6 1 2013-02-01 15:15:56

解決方案7 0 2014-08-21 10:37:07

解決方案1
73 已采納 2013-02-01 15:28:42

解決方案2
24 2013-02-01 15:12:28

解決方案3
4 2014-06-05 03:10:01

解決方案4
2 2019-04-02 16:38:58

解決方案5
2 2020-02-04 06:56:08

解決方案6
1 2013-02-01 15:15:56

解決方案7
0 2014-08-21 10:37:07