Question

我想请一些帮助。

我最近开始学习javascript，我遇到了一个我无法解决的错误，看起来很简单，但我找不到解决方法。所以，我有一张桌子：

表的重点是在点击时给出方块的值为“X”，红色背景（改变css类），以及所有其他绿色，但要做到这一点，我需要得到的值正方形，它总是返回“未定义”。

HTML表格如下所示：

<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代码如下所示：

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”，其值为“X”，它会告诉我

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

我想提前感谢所有人。

Answer 1

document.getElementById(id)引用的元素是表格的单元格，即<td>元素。

由于它没有value属性，因此您无法获得该属性。这解释了当您尝试访问它时未定义的原因。

要访问单元格中的文本，您应该访问innerText而不是值。像：

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

Answer 2

function alterar(id){

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

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

</script>

这样可行，因为你已经发送了id，那么为什么你需要再次获得id

Answer 3

好的，问题是td元素没有值。

但是您可以保留value属性并通过函数获取它：getAttribute

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

此外，我没有看到一句话：

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

因为变量obj是你的身份。

顺便说一句，如果你试图从一个元素中获取一些属性，那么获取元素一次并将其保存到变量是个很好的做法，例如。

function alterar(obj){

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

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

Answer 4

你可以在click函数中使用它，它返回被点击的元素。

<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来查询元素。

Answer 5

根据我的理解，您尝试阅读<td>标记属性的值。如果您想使用<html>获取java script代码属性，请按以下方式使用它：

// 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";

我希望这对你有所帮助。

Javascript无法获取元素的值，值等于undefined

5 个答案: