Search code examples
javascripthtml-tableslidershow-hide

Show / hide tables using slider

I'm trying to use a slider to show/hide tables and change a number on the screen at the same time with the below: 

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

"range" gets set fine and displays the number but I cant get the tables to toggle"

What I have now 

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

Still not hiding or showing though.

Solution

  • Your onchange needs a semicolon: onchange="showValue(this.value); showOrHide(this.value);" rather than a comma. You will also need the brace that Cerbrus mentioned. Also ("newValue").value simply needs to be newValue and make your comparisons with that. You are passing in the actual value of the slider as newValue, so you don't need to do anything special to reference it. Again, Cerbrus is also correct about = needing to be == to test for equality rather than doing an assignment.

    So you end up with if (newValue == 1) { ... } as the form of your if statements.

    Also, document.getElementById(guest2) and the rest need to be in the form document.getElementById("guest2") because guest2 is not a variable in your javascript but the id of your table. Which means you need to pass it in as a string not a reference.

    Also document.getElementById("range") needs to be document.getElementById("scaleSlider") which is the id rather than the type.