innerHTML改变文本

时间:2012-01-04 13:20:43

标签: javascript document innerhtml getelementbyid

我在使用javascript的document.getElementById()设置时遇到了一些困难。

<div id="display">
        <p></span></p>
        <p>Inputs:<br /><span style="font-size:20pt"></p>
        <a id="btn0">&bull; Input 1</a><br>
        <a id="btn1">&bull; Input 2</a><br>
        <a id="btn2">&bull; Input 3</a><br>
        <a id="btn3">&bull; Input 4</a><br>
        <a id="btn4">&bull; Input 5</a><br>
        <a id="btn5">&bull; Input 6</a><br>
        <a id="btn6">&bull; Input 7</a><br>
        <a id="btn7">&bull; Input 8</a><br>
        <a id="btn8">&bull; Input 9</a><br>
        <a id="btn9">&bull; Input 10</a><br>
        <a id="btn10">&bull; Input 11</a><br>
        <a id="btn11">&bull; Input 12</a><br>
        <a id="btn12">&bull; Input 13</a><br>
        <a id="btn13">&bull; Input 14</a><br>
        <a id="btn14">&bull; Input 15</a><br>
        <a id="btn15">&bull; Input 16</a><br>
        </span> </p> </div>

这是我正在更改这些项目的脚本:

<script type="text/javascript">
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
    // Check if a timeout occurred
    if(!xmlData)
    {
        document.getElementById('display').style.display = 'none';
        document.getElementById('loading').style.display = 'inline';
        return;
    }

    // Make sure we're displaying the status display
    document.getElementById('loading').style.display = 'none';
    document.getElementById('display').style.display = 'inline';

    // Loop over all the LEDs
    for(i = 0; i < 16; i++) {
        if(getXMLValue(xmlData, 'input'+i) == '1')
            document.getElementById('btn' + i).style.color = '#d00';
            document.getElementById('btn' + i).innerHTML = '&bull; WARNING';
        else
            document.getElementById('btn' + i).style.color = '#090';
    }

    // Loop over all the buttons

    // Update the POT value
    document.getElementById('analogue0').innerHTML =getXMLValue(xmlData,'analogue0');
    val=0;
    for(i = 0; i < 10; i++) {
    val=val+10;
    if(getXMLValue(xmlData, 'analogue0') >val)
        document.getElementById('pot' + i).style.color = '#090';
    else
        document.getElementById('pot' + i).style.color = '#fff';
    }

    // Update the POT value 2
    document.getElementById('analogue1').innerHTML =getXMLValue(xmlData,'analogue1');
    val=0;
    for(i = 0; i < 10; i++) {
    val=val+10;
    if(getXMLValue(xmlData, 'analogue1') >val)
        document.getElementById('1pot' + i).style.color = '#090';
    else
        document.getElementById('1pot' + i).style.color = '#fff';
    }


}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
</script>

我在尝试更改a标签之间的文本时遇到了问题。 文本的颜色变化很好,但是当改变文本时,没有任何事情发生。我已经读过这篇文章,但在谷歌上找不到任何类似的内容。

1 个答案:

答案 0 :(得分:1)

如果在if条件返回true时您想要执行多个语句,则需要用大括号括起它们。

更改

for(i = 0; i < 16; i++) {
    if(getXMLValue(xmlData, 'input'+i) == '1')
        document.getElementById('btn' + i).style.color = '#d00';
        document.getElementById('btn' + i).innerHTML = '&bull; WARNING';
    else
        document.getElementById('btn' + i).style.color = '#090';
}

for(i = 0; i < 16; i++) {
    if(getXMLValue(xmlData, 'input'+i) == '1') {
        document.getElementById('btn' + i).style.color = '#d00';
        document.getElementById('btn' + i).innerHTML = '&bull; WARNING';
    }
    else
        document.getElementById('btn' + i).style.color = '#090';
}