CODEWITHSUNDEEP
javascript
Jean
Jean

Reputation: 11

Radio buttons and display none

I'm creating an order form that when a button is clicked it displays an image in a separate div. The code works successfully for check boxes but with radio buttons doesn't hide the previously clicked image.

function displayImage(id) {
    var el = document.getElementById(id);
    if (el.style.display == "inline") {
        el.style.display = "none";
    } else {
        el.style.display = "inline";
    }
}

<tr>
    <td>
        <input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican');" />
        <label for="chkcheese">Yellow American</label>
    </td>
    <td>
        <input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack');" />
        <label for="chkjack">Pepper Jack</label>
    </td>
    <td>
        <input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz');"/>
        <label for="chkmozz">Mozzarella</label>
    </td>
</tr>


<div class="cheese">
    <img id="imgamerican" src="images/american-cheese-slice.png" style="display:none"/>
    <img id="imgcheddar" src="images/agedcheddar.png" style="display:none"/>
    <img id="imgjack" src="images/pepperJack.png" style="display:none" />
    <img id="imgswiss" src="images/swisscheese.png" style="display:none" />

Upvotes: 1

Views: 4390

Answers (2)

Ryan Kinal
Ryan Kinal

Reputation: 17732

It looks like your problem is that you're expecting the click event to fire when a radio button becomes unchecked. But it doesn't. You'll need to specifically change the display of the last-shown cheese, but only when it's a radio button that was clicked.

This solution is kind of a hack, but it should work in this situation:

JavaScript:

var lastUnique;
function displayImage(id, unique) {
    var el = document.getElementById(id);

    if (unique) {
        if (lastUnique) {
            lastUnique.style.display = 'none';
        }

        lastUnique = el;
    }

    el.style.display = 'block';
}

Radio buttons (note the added true):

<tr>
  <td><input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican', true);" />
  <label for="chkcheese">Yellow American</label></td>
  <td><input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack', true);" />
  <label for="chkjack">Pepper Jack</label></td>
  <td><input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz', true);" />
  <label for="chkmozz">Mozzarella</label></td>
</tr>

So, the JavaScript keeps track of the last element shown with the unique argument being truthy, and hides it when another call with unique == true happens.

Aside:

You might look into how event handling is done in the modern world. This is the old way of doing it, and it's not exactly manageable.

Also, consider looking into modularization and encapsulation techniques.

Upvotes: 0

I Hate Lazy
I Hate Lazy

Reputation: 48761

The click event only happens on the radio that was clicked.

You'll need to iterate the radio buttons and make sure that the deselected ones have their corresponding image hidden, or just iterate the images and hide them before showing the one that had its radio clicked.

function displayImage(id) {
    var imgs = document.querySelectorAll(".cheese > img");

    for (var i = 0; i < imgs.length; i++) {
        imgs[i].style.display = "none";
    }
    document.getElementById(id).style.display = "inline";
}

Upvotes: 1

Related Questions