What am I missing in my third JavaScript function?

Question

INTRO:

Providing a little context: I am trying to create workaround solutions in a HTML/CSS/JS based webticket builder.

This means I am creating online forms with a drag and drop tool that automatically generates titles, names, ids and all that in the general HTML code. So what I can't do is change the overall set up.

Every selection field I create though gives me a small textfield which is supposed to be used as a help field for this particular selection field. So for example I have a text field "mail adress" - the help text would then show "please use the format firstname.lastname@mailprovider.com" underneath it.

This "help" textbox is plain HTML, providing me with the possibility to add extra code inbetween - hence it's everything but pretty.

the html layout is not my idea, and I can only partially change it.

What I want to do:

Create an extra list with empty links, so I can use "onclick" on each item:

<!-- automatically visible -->

<!-- Checkbox im Status checked -->
<input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested:

<!-- Modal / Pop Up Fenster -->
<div id="mymodal" class="modal">

  <!-- Modal content -->
    <div class="modal-content">


      <!-- List items as links to make them clickable -->
        <ul id="myUL">
        <font size="3em">
          <li><a id="li1" title="item1" href="#" onclick="returncontent(this);return false;showitem1();">Item 1</a></li>
          <li><a id="li2" title="item2" href="#" onclick="returncontent(this);return false;showitem2();">Item 2</a></li>
          <li><a id="li3" title="item3" href="#" onclick="returncontent(this);return false;showitem3();">Item 3</a></li>
        </font>
        </ul>

    </div>
</div>

The selection list then has 3 triggering functions:
1. returning the selected item to another textfield (works)
2. not opening a "#" site (works)
3. show further selection fields based on the selected list item (does not work)

This is basically an attempt to create a dynamic webform, as the tool itself doesn't provide such options

So this is what I additionally have:
- a fieldset with class "item1" and two textfields:

This code is copied directly from the tool, hence the intuitive ids and layout in general.

<fieldset class="item1"><legend>Item 1 Selections</legend><div id="d_000000001845952" class="field  text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label>
                        <input id="f_000000001845952" name="id23" value=""     />
                      </div><div id="d_000000001844977" class="field  text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label>
                      <input id="f_000000001844977" name="id24" value=""     /></div></fieldset>

• a CSS code hiding the fieldset "item1" when the webform is opened:
  

  .item1 {
         display: none;
       }

• and my js functions:
  The first to return selected item to a specific textfield:

   <script type = "text/JavaScript">
   function returncontent(elem) {
   document.getElementById("f_000000001845521").value=elem.title;
   document.getElementById("mymodal").style.display = "none";
   document.getElementById("check").checked = false;
   }
   returncontent();
   </script> 

And the second to show me the necessary selection fields for list item 1:

<script type = "text/JavaScript">
function showitem1() {
    document.getElementsByClassName("item1")[0].style.display = "block";
}
</script>

And now the latter is, what doesn't work and I don't understand why.

I have build several checkboxes that display/hide individual fields and fieldsets via ID or class so for my understanding I didn't do anything different this time except triggering two functions at once.

Here you can find a fiddle of what I am trying to do.

Answer 1

I do not know why you do it, but your problem will be solved by changing the order of functions in your onclick . I changed the place of return false; after showitem1()

Check workable version here

 <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="#" onclick="returncontent(this);showitem1();return false;">Item 1</a></li> <li><a id="li2" title="item2" href="#" onclick="returncontent(this);showitem2();return false;">Item 2</a></li> <li><a id="li3" title="item3" href="#" onclick="returncontent(this);showitem3();return false;">Item 3</a></li> </font> </ul>

Answer 2

 document.getElementById("f_000000001845521").readOnly = true; function toggleBoxVisibility() { if (document.getElementById("check").checked == true) { document.getElementById("mymodal").style.display = "block"; } else { document.getElementById("mymodal").style.display = "none"; } } toggleBoxVisibility(); function returncontent(elem) { if(elem) document.getElementById("f_000000001845521").value = elem.title; document.getElementById("mymodal").style.display = "none"; document.getElementById("check").checked = false; } returncontent(); function showitem1() { document.getElementsByClassName("item1")[0].style.display = "block"; }

 .item1 { display: none; }

 <input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." /> <div class="help"> <script type="text/JavaScript"> document.getElementById("f_000000001845521").readOnly = true; </script> </div> <input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested: <div id="mymodal" class="modal"> <div class="modal-content"> <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="javascript:void(0)" onclick="returncontent(this);showitem1();">Item 1</a></li> <li><a id="li2" title="item2" href="javascript:void(0)" onclick="returncontent(this);showitem2();">Item 2</a></li> <li><a id="li3" title="item3" href="javascript:void(0)" onclick="returncontent(this);showitem3();">Item 3</a></li> </font> </ul> </div> </div> <fieldset class="item1"> <legend>Item 1 Selections</legend> <div id="d_000000001845952" class="field text"><label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "><label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /></div> </fieldset>

Answer 3

I've change a couple parts of your code here but the most notable is that you can call the first (almost global type of function) from the the second function. I did also combine the three showitem functions into one and set which fieldset to show based off the clicked elements title.

You can call each function from the onclick . You would simply need to change the order of return false; , placing it at the end (or just remove it and return: false; from the function?.!).

 function toggleBoxVisibility() { if (document.getElementById("check").checked == true) { document.getElementById("mymodal").style.display = "block"; var els = document.getElementsByClassName("item"); Array.prototype.forEach.call(els, function(el) { el.style.display = "none"; }); } else { document.getElementById("mymodal").style.display = "none"; } } toggleBoxVisibility(); function returncontent(elem) { document.getElementById("f_000000001845521").value = elem.title; document.getElementById("mymodal").style.display = "none"; document.getElementById("check").checked = false; } function showitem(elem) { returncontent(elem); document.getElementsByClassName(elem.title)[0].style.display = "block"; return false; }

 .item1, .item2, .item3 { display: none; }

 <input id="f_000000001845521" name="id12" value="This field is set automatically, based on chosen element from the list below." /> <div class="help"> <script type="text/JavaScript"> document.getElementById("f_000000001845521").readOnly = true; </script> </div> <:-- automatically visible --> <;-- Checkbox im Status checked --> <input type="checkbox" id="check" onclick="toggleBoxVisibility()" checked> Please choose which assignment type is to be requested; <;-- Modal / Pop Up Fenster --> <div id="mymodal" class="modal"> <!-- Modal content --> <div class="modal-content"> <!-- List items as links to make them clickable --> <ul id="myUL"> <font size="3em"> <li><a id="li1" title="item1" href="#" onclick="showitem(this);">Item 1</a></li> <li><a id="li2" title="item2" href="#" onclick="showitem(this);">Item 2</a></li> <li><a id="li3" title="item3" href="#" onclick="showitem(this);">Item 3</a></li> </font> </ul> </div> </div> <fieldset class="item item1"> <legend>Item 1 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset> <fieldset class="item item2"> <legend>Item 2 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset> <fieldset class="item item3"> <legend>Item 3 Selections</legend> <div id="d_000000001845952" class="field text"> <label for="f_000000001845952" id="l_000000001845952">Information 1</label> <input id="f_000000001845952" name="id23" value="" /> </div> <div id="d_000000001844977" class="field text "> <label for="f_000000001844977" id="l_000000001844977">Information 2</label> <input id="f_000000001844977" name="id24" value="" /> </div> </fieldset>