86

パラメータを渡すjavascript関数があります。このパラメーターは、Webページの要素（非表示フィールド）のIDを表します。この要素の値を変更したい。

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

これを行うと、オブジェクトがnullであるため、値を設定できないというエラーが発生します。しかし、ブラウザによって生成されたhtmlコードに表示されるため、オブジェクトがnullではないことはわかっています。とにかく、私はデバッグするために次のコードを試しました

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) が実行されると、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 関数を使用できます。お役に立てば幸いです。

于 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 に答える
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 に答える