web-dev-qa-db-ja.com

Javascript IDで要素を取得して値を設定する

パラメータを渡す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はページがロードされるときに動的にdetされます。これを$（document）.ready関数に追加しようとしましたが、うまくいきませんでした

javascriptdefault-value
63
jpo

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関数を使うことができます。お役に立てば幸いです。

59
Xiaodan Mao

与えられた

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

あなたが望むことをする

19
mplungjan
<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>
4
Dah Moymy

以下のように試してみてください。

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

私は問題はあなたがあなたのJavaScript関数を呼び出す方法であると思います。あなたのコードはこんな感じです：

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

myIDは引用符で囲む必要があります。

0
K.I

要素タイプごとに、特定の属性を使用して値を設定できます。例えば。：

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

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

あなたはここで例を試すことができます！

0
Darlan Dieterich