1
\$\begingroup\$

Asked this on StackOverflow, not knowing that this would be a better place for the question...

I've managed to figure out a script in js to hide and show various elements. But, I imagine there must be a cleaner/simpler way to do this that what I've created? (without using jquery).

Essentially, I'm just using an eventlistener to catch clicks and individual 'getElementbyID' - to my beginner understanding, it seemed like using queryselectorAll would have actually created more lines (at least by the examples I saw. I might've misunderstood)

Here's what I did:

Side note: I also noticed I was getting an error at the end.. I need to add an if exists statement, but didn't yet, just in case someone knows a cleaner way to do this.

// show/hide questions & divs on click of 'NEXT' button
var nextquestion = document.getElementsByClassName('btnnext');
for (let i = 0; i < nextquestion.length; i++) {
  nextquestion[i].addEventListener("click", function() {
    str = nextquestion[i].id;
    var closefield = str.replace("btnnext", "questionbox");
    var closebtn = nextquestion[i].id;
    var closebtnprev = str.replace("btnnext", "btnprev");
    document.getElementById(closefield).style.display = 'none';
    document.getElementById(closebtn).style.display = 'none';
    var isthere = document.getElementById(closebtnprev);
    if (isthere !== null) {
      document.getElementById(closebtnprev).style.display = 'none';
    };
    var openfield = "questionbox-" + (parseFloat(str.substring(str.indexOf("-") + 1)) + 1).toString();
    var openbtn = "btnnext-" + (parseFloat(str.substring(str.indexOf("-") + 1)) + 1).toString();
    var openbtnprev = "btnprev-" + (parseFloat(str.substring(str.indexOf("-") + 1)) + 1).toString();
    document.getElementById(openfield).style.display = 'block';
    document.getElementById(openbtn).style.display = 'table';
    document.getElementById(openbtnprev).style.display = 'table';
  });
};
// show/hide questions & divs on click of 'PREVIOUS' button
var prevquestion = document.getElementsByClassName('btnprev');
for (let i = 0; i < prevquestion.length; i++) {
  prevquestion[i].addEventListener("click", function() {
    strprev = prevquestion[i].id;
    var closefield2 = strprev.replace("btnprev", "questionbox");
    var closebtn2 = strprev.replace("btnprev", "btnnext");
    var closeprevbtn2 = "btnprev-" + parseFloat(strprev.substring(str.indexOf("-") + 1)).toString();
    document.getElementById(closefield2).style.display = 'none';
    document.getElementById(closebtn2).style.display = 'none';
    var isthere = document.getElementById(closeprevbtn2);
    if (isthere !== null) {
      document.getElementById(closeprevbtn2).style.display='none';
    };
    var openfield2 = "questionbox-" + (parseFloat(strprev.substring(strprev.indexOf("-") + 1)) - 1).toString();
    var openbtn2 = "btnnext-" + (parseFloat(strprev.substring(strprev.indexOf("-") + 1)) - 1).toString();
    var openprevbtn2 = "btnprev-" + (parseFloat(strprev.substring(str.indexOf("-") + 1)) - 1).toString();
    document.getElementById(openfield2).style.display = 'block';
    document.getElementById(openbtn2).style.display = 'table';
    // document.getElementById(openprevbtn2).style.display = 'table';
var isthere2 = document.getElementById(openprevbtn2);
      if (isthere2 !== null) {
        document.getElementById(openprevbtn2).style.display='table';
      };
  });
};
.quizholder form {
  display:flex;
flex-wrap: wrap;
  }
  .selectables{
    border:1px solid #ccc;
    background:#faf1d3;
    border-radius: 1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width:90%;
    padding: 8px 16px !important;
  }
  .selectables:hover {
    background-color: #ffffff;
    cursor: pointer;
  }
  .questionbox {
    flex:3;
  }
  .btnnext {
    flex:1;
    background:#d15d21;
    padding:.5em;
    color:#ffffff;
    font-weight:900;
    text-align:center;
    font-family: 'Helvetica', arial, sans-serif;
    font-size:.9em;
  }
  .btnnext:hover {
    background:#f36921;
    -webkit-transition: all .5s;
    /* Safari */
    transition: all .5s;
  }
  #btnnext-0 {
    display:table;
  }
  #questionbox-1, #questionbox-2, #questionbox-3, #btnnext-1, #btnnext-2,    #btnnext-3, #btnprev-1, #btnprev-2 {
    display:none;
  }
  .btnprev {
    border: 1px solid #ccc;
    padding: .25em;
    flex:1;
  }
<div class="quizholder">
  <form action="" method="post">
    <div class="questionbox" id="questionbox-0"><label for="dropdown0">Dropdown ONE</label>
      <br />
      <select class="select0 selectables" id="dropdown-0" name="dropdown0">
        <option disabled="disabled" selected="selected" value="">select...</option>
        <option value="10">Choice 1 (plus 10)</option>
        <option value="-5">Choice 2 (minus 5)</option>
        <option value="60">Choice 3 (plus 60)</option>
      </select>
    </div>
    <div class="btnnext" id="btnnext-0">Next question
    </div>
    &nbsp;
    <div class="btnprev" id="btnprev-1">go back to 1
    </div>
    <div class="questionbox" id="questionbox-1"><label for="dropdown1">Dropdown TWO</label>
      <br />
      <select class="select1 selectables" id="dropdown-1" name="dropdown1">
        <option disabled="disabled" selected="selected" value="">select...</option>
        <option value="8">Choice A (plus 8)</option>
        <option value="-10">Choice B (minus 10)</option>
        <option value="15">Choice C (plus 15)</option>
      </select>
    </div>
    <div class="btnnext" id="btnnext-1">Next question
    </div>
    &nbsp;
    <div class="btnprev" id="btnprev-2">go back to 2
    </div>
    <div class="questionbox" id="questionbox-2"><label for="dropdown2">Dropdown THREE</label>
      <br />
      <select class="select2 selectables" id="dropdown-2" name="dropdown2">
        <option disabled="disabled" selected="selected" value="">select...</option>
        <option value="-20">Choice ii (- 20)</option>
        <option value="15">Choice ii (plus 15)</option>
        <option value="12">Choice iii (plus 12)</option>
      </select>
    </div>
    <div class="btnnext" id="btnnext-2">Next question
    </div>
    <div class="questionbox" id="questionbox-3">
      <input type="submit" value="Submit" />
    </div>
  </form>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.