CODEWITHSUNDEEP
javascriptcsshtml-table
BruceyBandit
BruceyBandit

Reputation: 4334

My table is not hiding when using Javascript

I want to hide or show my spinner depending on what is selected in the radio button. The spinner is displayed in a table. If the user chose yes (radio button), it will display the table which the spinner is in, if the user chose no (radio button), it will hide the table the spinner is in.

I researched on Google the best way to use style in JavaScript and the one I most commonly found was using (variable).style.(css property).

I have tried this but it hasn't worked. What I want to know is that am I coding this wrong (it is not showing anything in error console and it seems right with the examples I have followed) or do I need to do it another way when it comes to display and hiding tables?

Below is my HTML code:

    <table id="tblWeight">
    <tr>
    <th>6: Provide a Total Weight for your Session</th>
    <td><input type="radio" name="weightChoice" value="yes" onClick="getWeight()"/> Yes</td>
        <td><input type="radio" name="weightChoice" value="No" onClick="getWeight()"/> No</td>
        </tr>
        </table>
        <div id="radioAlert"></div>
        <br/>
    <table>
    <tr>
    <th>Weight (%):</th>
        <td class="spinner"><input type="text" class="spinnerWeight" name="txtWeight" id="txtWeight"></td>
        <td><button class="scrollBtn" id="btnWeightUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
        <button class="scrollBtn" id="btnWeightDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
        </tr>
        </table>
        <div id="weightAlert"></div>
        <br/>
        <table><tr><th>7: Module:</th>
    <td><?php echo $moduleHTML; ?></td>
        </tr>
        </table>

Below is JavaScript code:

function getWeight() {
    var weightChoice = document.getElementsByName("weightChoice");               
    var textWeight = document.getElementById("txtWeight");
    var tableWeight = document.getElementById("tblWeight");

    if(weightChoice[0].checked == true){
        tableWeight.style.visibility=="visible";
        textWeight.value == 0;
    } else {
        tableWeight.style.visibility=="hidden";
        textWeight.value == 0;
    }
}

Upvotes: 0

Views: 89

Answers (2)

Ry-
Ry-

Reputation: 225164

You're using == to assign, when == is an equality comparison operator. It should be =:

function getWeight() {
    var weightChoice = document.getElementsByName("weightChoice");               
    var textWeight = document.getElementById("txtWeight");
    var tableWeight = document.getElementById("tblWeight");

    if(weightChoice[0].checked) {
        tableWeight.style.visibility = "visible";
        textWeight.value = 0;
    } else {
        tableWeight.style.visibility = "hidden";
        textWeight.value = 0;
    }
}

Also, == true, which I removed, is never necessary. I repeat - never. Anywhere you use == true, just take it out.

Upvotes: 0

Pointy
Pointy

Reputation: 413976

Your assignment statements are written with doubled "=" characters, which makes them not be assignment statements.

        if(weightChoice[0].checked == true){
            tableWeight.style.visibility = "visible";
            textWeight.value = 0;
        }else{
            tableWeight.style.visibility = "hidden";
            textWeight.value = 0;
        }

The "==" is a comparison operator, so your statements were not syntactically erroneous and thus no errors were reported.

Upvotes: 1

Related Questions