JavaScriptは要素の値を取得できません。値は未定義です

私は最近、JavaScriptを学び始めました。エラーを見つけました。修正できません。単純ですが、私は見つけることができません。それを修正する方法。JavaScriptは要素の値を取得できません。値は未定義です

とテーブルのポイントが値「X」をクリック、赤色の背景（変化するCSSクラス）で正方形を与えることであり、他のすべての緑：だから、私はテーブルを持っていますしかし、それを行うには、私は正方形の値を取得する必要があり、それは常に "未定義"を返しています。 HTML OF TABLE [ IMAGE ]

HTMLテーブルは次のようになります。

function alterar(obj){ 

var id = document.getElementById(obj).id; 
var value = document.getElementById(id).value; 

if(value == 'X'){ 
    obj.className='red'; 
} else { 
    obj.className='green'; 
    } 
} 

</script>

例えば、私はその正方形の "44" を、使用したい場合：

<table> 
    <tr> 
     <td class="normal" id="11" value="0" onclick="alterar('11');">0</td> 
     <td class="normal" id="12" value="1" onclick="alterar('12');">1</td> 
     <td class="normal" id="13" value="2" onclick="alterar('13');">2</td> 
     <td class="normal" id="14" value="X" onclick="alterar('14');">X</td> 
     <td class="normal" id="15" value="1" onclick="alterar('15');">1</td> 
     <td class="normal" id="16" value="0" onclick="alterar('16');">0</td> 
     <td class="normal" id="17" value="0" onclick="alterar('17');">0</td> 
    </tr> 
     <td class="normal" id="21" value="0" onclick="alterar('21');">0</td> 
     <td class="normal" id="22" value="1" onclick="alterar('22');">1</td> 
     <td class="normal" id="23" value="2" onclick="alterar('23');">2</td> 
     <td class="normal" id="24" value="X" onclick="alterar('24');">X</td> 
     <td class="normal" id="25" value="1" onclick="alterar('25');">1</td> 
     <td class="normal" id="26" value="0" onclick="alterar('26');">0</td> 
     <td class="normal" id="27" value="0" onclick="alterar('27');">0</td> 
    </tr> 
     <td class="normal" id="31" value="0" onclick="alterar('31');">0</td> 
     <td class="normal" id="32" value="1" onclick="alterar('32');">1</td> 
     <td class="normal" id="33" value="2" onclick="alterar('33');">2</td> 
     <td class="normal" id="34" value="X" onclick="alterar('34');">X</td> 
     <td class="normal" id="35" value="1" onclick="alterar('35');">1</td> 
     <td class="normal" id="36" value="0" onclick="alterar('36');">0</td> 
     <td class="normal" id="37" value="0" onclick="alterar('37');">0</td> 
    </tr> 
     <td class="normal" id="41" value="0" onclick="alterar('41');">0</td> 
     <td class="normal" id="42" value="1" onclick="alterar('42');">1</td> 
     <td class="normal" id="43" value="2" onclick="alterar('43');">2</td> 
     <td class="normal" id="44" value="X" onclick="alterar('44');">X</td> 
     <td class="normal" id="45" value="1" onclick="alterar('45');">1</td> 
     <td class="normal" id="46" value="0" onclick="alterar('46');">0</td> 
     <td class="normal" id="47" value="0" onclick="alterar('47');">0</td> 
    </tr> 
</table>

私のjavascriptのコードは次のようになります値は「X」であることがわかります。value is undefined [ IMAGE ]

<td class="normal" id="44" value="X" onclick="alterar('44');">X</td>

彼らの時代に先ず皆に感謝したいと思います。

出典

2017-11-14 ugadbu

onclick関数itselftの値を渡すことはできませんか？ –

htmlテーブルとコードを投稿する – LiverpoolOwen

function alterar(id){ 

//var id = document.getElementById(obj).id; 
var value = document.getElementById(id).innerText; 

if(value == 'X'){ 
    ...... 
} else { 
    ........ 
    } 
} 

</script>

あなたがIDを取得する必要がありますなぜあなたはすでに再び

出典

2017-11-14 11:48:41

document.getElementById(id)で参照される要素は、テーブルのセル、すなわち<td>要素であり、その後のIDを送信しているので、これは動作します。

value属性がないため、取得できません。なぜあなたはそれにアクセスしようとすると未定義になっているのか説明しています。

セル内のテキストにアクセスするには、値の代わりにinnerTextにアクセスする必要があります。ように：あなたは<td>タグ属性の値を読み取るしようと、私の理解のために

var value = document.getElementById(id).innerText;

出典

2017-11-14 11:48:46 Nisarg

。あなたが言及した以下のようにそれを使うjava scriptを使用して<html>タグ属性を取得したい場合：

// Get all images in the document 
var images = document.body.getElementsByTagName("img"); 
// Get the src attribute of the first one 
var src0 = images[0].getAttribute("src"); 
// Get the src attribute of the second simply by reading the property 
var src1 = images[1].src;

あなたのケースでは、値を取得：

var id = document.getElementById(obj).id; 
var value = id.getAttribute("value");

をしても、あなたは次のように条件を確認することで、クラスを追加することができます。

id.className += " otherclass";

私はこれが役に立ちそうです。

出典

2017-11-14 11:52:04

だから、問題はtd要素が値を持つことができないということです。

しかし、あなたはvalue属性を残し、機能によってそれを得ることができます：変数objは、あなたのIDですので、

var id = document.getElementById(obj).id;

：また、私はラインのポイントが表示されていないgetAttribute

var value = document.getElementById(id).getAttribute("value");

。

ところで、1つの要素から少数の属性を取得しようとすると、要素を一度取得して変数に保存することをお勧めします。

function alterar(obj){ 

    var element = document.getElementById(obj); 
    var id = element.id; 
    var value = element.getAttribute("value"); 

    if (value == 'X') { 
     element.className='red'; 
    } else { 
     element.className='green'; 
    } 
}

Regards、KJ。

出典

2017-11-14 11:57:42

あなたがそうのような要素のidでGETから取得要素でのinnerTextを通じて値にアクセスする必要があります：あなたが返す、クリック機能でこれをで使用することができます

function alterar(id){ 
 

 
var value = document.getElementById(id); 
 

 
if(value.innerText === 'X'){ 
 
    value.className='red'; 
 
} else { 
 
    value.className='green'; 
 
    } 
 
}

/* Styles go here */ 
 

 
.green { 
 
    background-color: green; 
 
} 
 
.red { 
 
    background-color: red; 
 
}

<table> 
 
    <tr> 
 
     <td class="normal" id="11" value="0" onclick="alterar('11');">0</td> 
 
     <td class="normal" id="12" value="1" onclick="alterar('12');">1</td> 
 
     <td class="normal" id="13" value="2" onclick="alterar('13');">2</td> 
 
     <td class="normal" id="14" value="X" onclick="alterar('14');">X</td> 
 
     <td class="normal" id="15" value="1" onclick="alterar('15');">1</td> 
 
     <td class="normal" id="16" value="0" onclick="alterar('16');">0</td> 
 
     <td class="normal" id="17" value="0" onclick="alterar('17');">0</td> 
 
    </tr> 
 
     <td class="normal" id="21" value="0" onclick="alterar('21');">0</td> 
 
     <td class="normal" id="22" value="1" onclick="alterar('22');">1</td> 
 
     <td class="normal" id="23" value="2" onclick="alterar('23');">2</td> 
 
     <td class="normal" id="24" value="X" onclick="alterar('24');">X</td> 
 
     <td class="normal" id="25" value="1" onclick="alterar('25');">1</td> 
 
     <td class="normal" id="26" value="0" onclick="alterar('26');">0</td> 
 
     <td class="normal" id="27" value="0" onclick="alterar('27');">0</td> 
 
    </tr> 
 
     <td class="normal" id="31" value="0" onclick="alterar('31');">0</td> 
 
     <td class="normal" id="32" value="1" onclick="alterar('32');">1</td> 
 
     <td class="normal" id="33" value="2" onclick="alterar('33');">2</td> 
 
     <td class="normal" id="34" value="X" onclick="alterar('34');">X</td> 
 
     <td class="normal" id="35" value="1" onclick="alterar('35');">1</td> 
 
     <td class="normal" id="36" value="0" onclick="alterar('36');">0</td> 
 
     <td class="normal" id="37" value="0" onclick="alterar('37');">0</td> 
 
    </tr> 
 
     <td class="normal" id="41" value="0" onclick="alterar('41');">0</td> 
 
     <td class="normal" id="42" value="1" onclick="alterar('42');">1</td> 
 
     <td class="normal" id="43" value="2" onclick="alterar('43');">2</td> 
 
     <td class="normal" id="44" value="X" onclick="alterar('44');">X</td> 
 
     <td class="normal" id="45" value="1" onclick="alterar('45');">1</td> 
 
     <td class="normal" id="46" value="0" onclick="alterar('46');">0</td> 
 
     <td class="normal" id="47" value="0" onclick="alterar('47');">0</td> 
 
    </tr> 
 
</table>

出典

2017-11-14 11:59:19 LiverpoolOwen

クリックされた要素。

<td class="normal" id="11" value="0" onclick="alterar(this);">0</td>

次に、渡された要素に関数アクセスでアクセスします。

function alterar(obj){ 
    var value = obj.innerText; 
    if(value == 'X'){ 
     obj.className='red'; 
    } else { 
     obj.className='green'; 
    } 
}

idを使用して要素をクエリする必要はありません。

出典

2017-11-14 13:55:01

JavaScriptは要素の値を取得できません。値は未定義です

答えて

関連する問題