Question

我正在尝试使用滑块显示/隐藏表格并同时使用以下内容更改屏幕上的数字：

<input id="scaleSlider" type="range" value="1" min="1"  max="9" step="1" onchange="showValue(this.value), showOrHide(this.value)"/>

<script type="text/javascript">
    function showValue(newValue) {
        document.getElementById("range").innerHTML = newValue;
    }
</script>
<script type="text/javascript">
    function showOrHide(newValue) {
        if (("newValue").value = 1) {
            document.getElementById(guest2).style.display="none";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
        if (("newValue").value = 2) {
            document.getElementById(guest2).style.display="block";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
}

</script>

“范围”设置正常并显示数字，但我无法让表格切换“

我现在拥有什么

<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</td>
</table>

<script type="text/javascript">
function showOrHide(newValue){

    if(newValue == 1) {
document.getElementById(guest2).style.display="none";
document.getElementById(guest3).style.display="none";
document.getElementById(guest4).style.display="none";
document.getElementById(guest5).style.display="none";
document.getElementById(guest6).style.display="none";
document.getElementById(guest7).style.display="none";
document.getElementById(guest8).style.display="none";
document.getElementById(guest9).style.display="none";
}
    if(newValue == 2) {
document.getElementById(guest2).style.display="block";
document.getElementById(guest3).style.display="none";
document.getElementById(guest4).style.display="none";
document.getElementById(guest5).style.display="none";
document.getElementById(guest6).style.display="none";
document.getElementById(guest7).style.display="none";
document.getElementById(guest8).style.display="none";
document.getElementById(guest9).style.display="none";
}
}   

</script>

仍然没有隐藏或显示。

Answer 1

如果您正确格式化代码，您会发现错过了}来关闭function showOrHide(newValue)。

此外，("newValue").value无效。只需使用newValue：

if(newValue == 1)

修改此外，您似乎在.value = 2中使用if，这应该是.value == 2（==1相同）

Answer 2

你的onchange需要一个分号：onchange="showValue(this.value); showOrHide(this.value);"而不是一个逗号。你还需要Cerbrus提到的支具。同样("newValue").value只需要newValue并与之进行比较。您将滑块的实际值作为newValue传递，因此您不需要做任何特殊的操作来引用它。再一次，Cerbrus对于=需要==来测试平等而不是做任务也是正确的。

因此，您最终会以if (newValue == 1) { ... }作为if语句的形式。

此外，document.getElementById(guest2)和其他内容需要采用document.getElementById("guest2")格式，因为guest2不是javascript中的变量，而是表格的id。这意味着您需要将其作为字符串而不是引用传递。

同样document.getElementById("range")必须是document.getElementById("scaleSlider")，而不是类型。

Answer 3

试试这个

<input id="scaleSlider" type="range" value="1" min="1"  max="9" step="1" onchange="showOrHide(this.value)"/>

<script type="text/javascript">
    function showOrHide(newValue) {
        var newValue = document.getElementById("range").value;
        if (newValue == 1) {
            document.getElementById(guest2).style.display="none";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
        if (newValue == 2) {
            document.getElementById(guest2).style.display="block";
            document.getElementById(guest3).style.display="none";
            document.getElementById(guest4).style.display="none";
            document.getElementById(guest5).style.display="none";
            document.getElementById(guest6).style.display="none";
            document.getElementById(guest7).style.display="none";
            document.getElementById(guest8).style.display="none";
            document.getElementById(guest9).style.display="none";
        }
}
</script>

使用滑块显示/隐藏表格

3 个答案: