Javascript Replace innerhtml

Question

I am having trouble replacing the html. I want the whole "expand" div output to be replaced, as in the h3 and li texts will change according to which button the user presses.

As of now, the code does work to a point, the h3 changes, but rather than typing the actual text into my javascript, I want to be able to call the id and change it. Another problem is that pressing the prev button doesn't do anything yet. I also want the list of answers to change when clicking next.

Desired Outcome when user clicks on next button, html is replaced with next question. when user clicks on prev button, html is replaced with previous question.

function nextButton() {
 var str = document.getElementById("expand").innerHTML;
 var res = str.replace("which icon is used for GitHub?", "what is this?");
 document.getElementById("expand").innerHTML = res;
}
var iconquiz = [
 {
 iq2: "<h3>what is this?</h3>",
 ia2: "<li>this is something</li><li>this is something2</li>"
 },
 {
 iq3: "<h3>what is next></h3>",
 ia3: "<li>something</li><li>something else</li>"
 }
];

/*************
MAIN STUFFF
*************/
body {
 background: #CCC;
 font-family: 'Varela Round', sans-serif;
}
.collapse {
 color: #fff;
 background: #494949;
 border-radius: 10px;
 width: 300px;
 margin: 20px auto;
 padding: 10px 0;
 box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
 text-align: center;
}
input {
 display: none;
 visibility: hidden;
}
label {
 width: 90px;
 margin: 0 auto;
 margin-bottom: 10px;
 display: block;
 text-align: center;
 color: #fff;
 background-color: #4ada95;
 border-radius: 5px;
}
label:hover {
 color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
 background-color: #707070;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 margin: 0;
 padding: 10px;
}
li {
 list-style-type: none;
 padding: 10px;
 margin: 0 auto;
}
button {
 color: #fff;
 background-color: #707070;
 border-radius: 5px;
 border-style: solid;
 border-color: #707070;
 margin: 5px;
}
/***********
QUIZES
***********/
#expand {
 height: 225px;
 overflow: hidden;
 transition: height 0.5s;
 background-color: #4ada95;
 color: #FFF;
 width: 250px;
 margin: 0 auto;
 text-align: center;
 border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
 height: 0px;
}
#toggle:checked ~ label::before {
 display: hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
 <h2>Icon Quiz</h2>
 <input id="toggle" type="checkbox" checked>
 <label for="toggle">take quiz</label>
 <div id="expand">
 <section>
 <h3>which icon is used for GitHub?</h3>
 <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
 <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
 <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
 </section>
 <button type="button">prev</button><button onclick="nextButton()" type="button">next</button>
 </div>
</div>

• Marc: Your next and previous buttons should just increment and decrement your array's index. And your function can just do this: document.getElementById("expand").innerHTML = iconquiz[index].iq; Make your JS object properties identical rather than iq2, iq3, etc.
• hannacreed: what would this look like? I'm not great with js, would it be var iconquiz= [ { iq [<h3>question</h3>], [ <h3>question2</h3>]?

Answer 1

I haven't done all the cleanup here, but I think you'll get the idea from what's below. Note that I gave your <h3> element an ID so now you can just replace the raw text instead of trying to insert an HTML element into there. You'll have to work through how the answers are displayed, etc.

You'll also need to check the bounds of your array (list of questions) so your index doesn't go below zero or above the max index (length minus 1).

var index = 0;
function nextButton() {
 index++;
 document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
function prevButton() {
 index--;
 document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
}
var iconquiz = [
 {
 iq: "question number one",
 ia: "<li>this is something</li><li>this is something2</li>"
 },
 {
 iq: "question number two",
 ia: "<li>something</li><li>something else</li>"
 },
 {
 iq: "question number three",
 ia: "<li>something</li><li>something else</li>"
 }
];

/*************
MAIN STUFFF
*************/
body {
 background: #CCC;
 font-family: 'Varela Round', sans-serif;
}
.collapse {
 color: #fff;
 background: #494949;
 border-radius: 10px;
 width: 300px;
 margin: 20px auto;
 padding: 10px 0;
 box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
/*************
QUIZ BOXES
*************/
h2 {
 text-align: center;
}
input {
 display: none;
 visibility: hidden;
}
label {
 width: 90px;
 margin: 0 auto;
 margin-bottom: 10px;
 display: block;
 text-align: center;
 color: #fff;
 background-color: #4ada95;
 border-radius: 5px;
}
label:hover {
 color: #494949;
}
label::before {
}
/************
QUIZ CONTENT
************/
h3 {
 background-color: #707070;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 margin: 0;
 padding: 10px;
}
li {
 list-style-type: none;
 padding: 10px;
 margin: 0 auto;
}
button {
 color: #fff;
 background-color: #707070;
 border-radius: 5px;
 border-style: solid;
 border-color: #707070;
 margin: 5px;
}
/***********
QUIZES
***********/
#expand {
 height: 225px;
 overflow: hidden;
 transition: height 0.5s;
 background-color: #4ada95;
 color: #FFF;
 width: 250px;
 margin: 0 auto;
 text-align: center;
 border-radius: 10px;
}
/**********
FIRST QUIZ
**********/
#toggle:checked ~ #expand {
 height: 0px;
}
#toggle:checked ~ label::before {
 display: hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<div class="collapse">
 <h2>Icon Quiz</h2>
 <input id="toggle" type="checkbox" checked>
 <label for="toggle">take quiz</label>
 <div id="expand">
 <section>
 <h3 id="questionHere">which icon is used for GitHub?</h3>
 <li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
 <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
 <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
 </section>
 <button type="button" onclick="prevButton()">prev</button><button onclick="nextButton()" type="button">next</button>
 </div>
</div>

• hannacreed: for some reason this skips the first question in the array, not the question that is originally in the html, but the first in the array.
• Marc: @hannacreed, the array element shown will always be the one that corresponds to the index variable. You need to manipulate that variable accordingly (similar to how the next and previous functions manipulate it). If this answer works, I encourage you to accept it as the correct one.