Javascript 替换 innerhtml

Question

我在替换 html 时遇到问题。 我希望替换整个“扩展”div 输出，因为 h3 和 li 文本将根据用户按下的按钮而改变。

截至目前，代码确实在一定程度上起作用，h3 发生了变化，但我希望能够调用 id 并更改它，而不是将实际文本键入我的 javascript。另一个问题是按下 prev 按钮还没有做任何事情。我还希望在单击下一步时更改答案列表。

期望的结果 当用户单击下一步按钮时，html 将替换为下一个问题。 当用户单击上一个按钮时，html 将替换为上一个问题。

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>

Answer 1

我还没有完成这里的所有清理工作，但我想您会从下面的内容中了解到这一点。请注意，我给了你 <h3>元素一个 ID，所以现在您可以只替换原始文本，而不是尝试将 HTML 元素插入其中。您必须了解答案的显示方式等。

您还需要检查数组的边界(问题列表)，以便您的索引不会低于零或高于最大索引(长度减去 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>