What is the proper way to display a second div linked to an action from a first div?

JavaScript
1

Say I have div1, div2, div3

Div1 contains main selection radio boxes

Div2 contains text that is automatically displayed from any of the selection boxes from div1… plus it contains 2 additional selection boxes that will display div3 … the first box is set as checked and will not display div3… if you select the second box then you should display div3.

Div3 contains other boxes to just check and they do nothing else.

QUESTION:
How do I make div3 show and hide as I select the check boxes from div2?

function singlePumpf (){

if(document.getElementById ("pump1").checked) {

  document.getElementById ("fieldsetpump2").style.display= "none";

  document.getElementById ("fieldsetpump3").style.display = "none";

}

if(document.getElementById("p1fixedselect").checked){

document.getElementById ("p1controlselect").style.display ="none";

// ^^ this second if hides div3 automatically with the box that is checked by default

function p1Controlf (){
if( document.getElmentById ("p1variableselect").checked){
document.getElementById("p1controlselect").style.display = "block";
}
}

// ^^ this other function should make div3 appear, but I can't see anything in the console and it isn't giving me any errors.

codepen

2

Oh by the way… I can make appear and disappear the main divs of the entire code with the main selection boxes… the problem is making a secondary set of divs appear and dissappear with the secondary selection boxes from the main divs…

3

I don’t follow.

Explain the requirements and the desired functionality. Pretend like you are talking to someone you want to code this for you.

Instead of referring to divs explain it using the content. Pretend like I can’t see the code and explain it using the titles (for groups of content) or names of radio buttons.

If you do refer to elements, use any ids or classes on the elements. I don’t know what div3 is.

I don’t know what radio boxes you are talking about and I don’t know what content you want to show/hide.

1 Like
4

Ok… lets concentrate on this first piece… eventually I want to make the other sections behave the same.

This is the input that will trigger the first function to do what I need to do:

<input type="radio" name="pumpselect" id= pump1 value="singlePump" onclick = "singlePumpf()" checked>
        <label for="pump1"> Single Pump</label><br>

This is the function the input id=pump1 will trigger:


function singlePumpf (){
if(document.getElementById ("pump1").checked) {
  document.getElementById ("fieldsetpump2").style.display= "none";
  document.getElementById ("fieldsetpump3").style.display = "none";
}
if(document.getElementById("p1fixedselect").checked){
document.getElementById ("p1controlselect").style.display ="none";

}
}

^^ All good up to here. The second if statement of the function is also hiding the div id=p1controlselect,

Now the problem begins. I want to show div id=p1controlselect by selecting this other input:

<input type="radio" name="p1type" value="p1variable" id = p1variableselect>
        <label for="p1variable" onlcick = "p1Controlf ()"> Variable displacement</label><br>

And hide it again if the user clicks in this other secondary input:

 <input type="radio" name="p1type" value="p1fixed" id = "p1fixedselect" checked>
        <label for="p1fixed"> Fixed displacement </label>

The function I have to show div id = p1controlselect is the one below. I haven’t made another function to hide using input id = p1fixed yet, because I can’t make it to show onclick input id = p1variableselect, so I am stuck at this point.

function p1Controlf (){
if( document.getElmentById ("p1variableselect").checked){
document.getElementById("p1controlselect").style.display = "block";
}
}
5

Earlier I was trying to add and remove these elements by using the parent/child method, but with this type of setup I don’t think it will work… once you remove an element you can’t add it back up that easily because the element is gone and javascript doesn’t seem to detect it anymore, even if it is still in html file.

So I am now trying the hide and show method, which works for the main divs, but not for secondary divs…

Next step is just put all the information I need just into the 3 divs that I are working, and don’t create any secondary choices. That would work too, but not the way I wanted it.

6

Hide the group by default using CSS

#p1controlselect {
  display: none;
}

Then set the display in the p1Controlf function to show it. Set it back to hidden in the function you have not written yet.

  1. Your p1variableselect and p1fixedselect inputs are not inside their labels.

  2. You have a typo for the onclick property in the HTML, you have onlcick

  3. You have a typo inside the p1Controlf function for getElementById, you have getElmentById.

1 Like
7

Typos?.. oh man… this coding stuff doesn’t forgive…

I have changed the code to reduce it to 3 fieldsets with all the information, right now it is working good, and I might just leave it that way as what the user can see anyway.

However, when the form is sent, it also sends fields that are not required by the user and makes it for more fieldsets that you don’t need when you receive the form.

Makes me think… maybe the parent/child method didn’t work not just because I deleted an item, but maybe because I might had a typo while calling a function to add the item back up…

8

Typos are no joke, they account for more bugs in code than you might imagine.

The more complex the code and logic are the harder they can be to spot because you are so focused on the “engineering” part that you become blind to the simple mistakes.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.