Problem using if/then command with “checkbox.checked === true” to hide/show an element when there's another checkbox involved

Question

TL;DR: How to have a checkbox that displays a certain div element if all radio buttons are blank, but if you have a certain radio button selected, it will display a different div element when you check it. The code I have isn't working and I don't know why.

Sorry, this is going to be a very long and complicated question. I have a checkbox that shows or hides a class of div elements ("c") depending on whether or not the checkbox is checked, which has been working fine. I also have two radio buttons located elsewhere on the page, which, when selected (provided that "c" is also selected), each show different div elements that are located inside one of the "c" elements - let's call those inner divs "one" and "two". Those have been working fine as well.

By default, when the checkbox is checked, "one" is shown, even if neither radio button has been selected yet. If someone checks the checkbox and then the radio button for "two", "one" disappears and "two" takes its place. My difficulty is this: If someone checks "c" (thereby displaying "one" as well), then selects the radio button to display "two" instead of "one", unchecks "c" and then checks it again , I want "two" to reappear instead of "one". In other words, I want to still display "one" by default when "c" is checked, but I also want to make it so that if the radio button for "two" is already selected and the checkbox is unchecked , clicking the checkbox will show "two" instead of "one".

For the checkbox, I just have an onclick function that hides or shows "c" (via display:none / display:block) each time the checkbox is clicked. The two radio buttons work the same way (except the checkbox has to be selected in order for "w" or "d" to actually show up, since they're hidden if "c" is hidden).

Right now, the onclick function that hides/shows "c" says that if the radio button for "two" is selected, then "two" should show up; if not, then "one" should show up. (That's how I make "one" display by default without forcing it to appear whenever the checkbox is clicked, since neither radio button is selected when you load the page.) For some reason, it's not working, and I don't understand why.

Also, not sure if this matters, but the radio buttons are in one of the "c" elements and only appear when the checkbox is clicked. Anyway, here are the relevant parts of my code:

HTML:

<input type="checkbox" onclick="showdiv()"> Checkbox to show all divs in the class 'data'

<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a" onclick="one()"> Radio button to show first div
<input type="radio" id="radio2" name="a" onclick="two()"> Radio button to show second div
</div>

<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>

Javascript:

<script type="text/javascript">

var data = document.getElementsByClassName("data");
var one = document.getElementById("one");
var two = document.getElementById("two");

function one() {
    one.style.display = "block";
    two.style.display = "none";
}

function two() {
    two.style.display = "block";
    one.style.display = "none";
}

function showdiv() {
    for(var i = 0; i < data.length; i++) {
        data[i].style.display === "none" ?
        data[i].style.display = "block" :
        data[i].style.display = "none";}
    var checktwo = document.getElementById("radio2");
    if (checktwo.checked === true) {
        (two.style.display = "block") &&
        (one.style.display = "none");}
    else {
        (one.style.display = "block") &&
        (two.style.display = "none");}
}

</script>

What's happening is this: I check the checkbox to display "c" and "one" appears by default (as it should, since the function showdiv() says to show "one" only if the radio button for "two" isn't currently selected). I select the radio button to display "two" instead of "one", and that works fine. But then when I go to uncheck and re-check the box to display "c", "one" shows up when it should be showing "two".

Hopefully it's a simple fix - I basically learned Javascript just to make this thing I'm working on and I'm still figuring out basic stuff, so maybe I just missed something easy. I'd be eternally grateful to anyone who can help me out with this.

Answer 1

You're creating too many functions for just toggling one level deep, nested divs. Also, you should avoid using inline on* handlers (onclick, oninput, etc) and replace them with event listeners instead as follows:

All you need is two functions:

• one function say, showdiv() for toggling the main div when the first input is clicked and,
• another function say, showInnerDiv() for toggling the #one and #two divs.

Check and run the Code Snippet below for a practical example of the above:

 var input = document.querySelector('input'); // retrieve first input var innerBtns = document.querySelectorAll('input[type^="radio"]'); // retrieve the radio buttons function showdiv() { var data = document.querySelectorAll(".data"); // retrieve both .data divs data.forEach(x => { //use forEach to toggle the display of each .data div x.style.display = (x.style.display === "none") ? "block" : "none"; }); document.getElementById("one").style.display = "block"; document.getElementById("two").style.display = "none"; } function showInnerDiv() { var one = document.getElementById("one"); var two = document.getElementById("two"); var checktwo = document.getElementById("radio2"); if (checktwo.checked === true) { two.style.display = "block"; one.style.display = "none"; } else { one.style.display = "block"; two.style.display = "none"; } } input.addEventListener("click", showdiv); innerBtns.forEach(btn => { //use forEach to add a click listener to each radio button btn.addEventListener("click", showInnerDiv); }) 

 #one {background-color:red; padding: 10px;margin-top: 10px;} #two {background-color:yellow; padding: 10px;margin-top: 10px;} 

 <input type="checkbox"> Checkbox to show all divs in the class 'data' <div class="data" style="display:none;"> <input type="radio" id="radio1" name="a"> Radio button - first div <input type="radio" id="radio2" name="a"> Radio button - second div </div> <div class="data" style="display:none;"> <div id="one" style="display:none;">first div</div> <div id="two" style="display:none;">second div</div> </div>