我无法更换html。 我希望替换整个“expand”div输出,因为h3和li文本将根据用户按下的按钮而改变。
截至目前,代码确实有效,h3发生了变化,但是我希望能够调用id并进行更改,而不是将实际文本输入到我的javascript中。另一个问题是按下prev按钮还没有做任何事情。我还希望在点击下一步时更改答案列表。
期望的结果 当用户点击下一个按钮时,html将替换为下一个问题。 当用户点击prev按钮时,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>
答案 0 :(得分: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>