【发布时间】：2015-09-21 07:50:44
【问题描述】：
我对 Javascript 很陌生，我必须做一个性格测验。我需要测验只是 Javascript，而不是 jQuery。我需要让每个答案选项都可以点击，并且一次只显示一个问题。以及找到一种方法来存储每个答案以显示结果。我只是不确定从哪里开始，而且我遇到了一些麻烦。这可能看起来很愚蠢，但我真的很想得到一些帮助，看看我哪里出了问题以及如何解决它。以下是我迄今为止对 html、css 和 javascript 所做的工作。提前致谢
var startButton = document.getElementById("startButton");
startButton.addEventListener("click", startClick);
function startClick() {
var intro = document.getElementById("intro");
intro.style.display = "none";
startButton.style.display = "none";
var question1 = document.getElementById("question1");
question1.style.display = "block";
}
var answerButton = document.getElementsByTagName("li");
answerButton[0].addEventListener("click", answerClick);
console.dir(answerButton);
function answerClick(eventObject) {
var eventClick = eventObject.target;
var question = document.getElementsByClassName("question");
for(i= 0; i < question.length; i ++); {
question[i].style.display = "block";
}
}@charset"UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*above is Eric Meyer CSS reset*/
#titleimage {
width: 100%;
padding-top: .5%;
padding-bottom: .5%;
}
#titleimage img {
max-width: 100%;
}
.question, #results {
display: none;
}
p {
font-family:'Helvetica';
font-size: 1.7em;
font-weight: 100;
text-align:center;
padding: 1em;
}
h3 {
font-family:'Helvetica';
font-size: 1.7em;
font-weight: 150;
text-align:center;
}
h2 {
font-family:'Helvetica';
font-size: 1.5em;
font-weight:200;
text-align:center;
}
.button {
margin: 0.5em;
padding: 0.5em;
text-align:center;
}
.button:hover {
text-decoration: underline;
}
.question li {
border: 1px solid;
margin: 0.5em;
padding: 0.5em;
font-family:'Helvetica';
font-size: 1.5em;
text-align:center;
background-color: #ADDEF4;
}
.question li:hover {
text-decoration: underline;
}
#results img {
padding-left: 30%;
padding-right: 30%;
}<body>
<div id="titleimage">
<img src="Parks-and-rec.jpg" alt="Parks and Rec Banner">
</div>
<div id="intro">
<h2>Take the quiz to see which Parks and Rec character is most like you!</h2>
</div>
<div id="startButton" class="button">
<h3>Let's get started!</h3>
</div>
<div id="question1" class="question">
<p>What is your favourite food?</p>
<ul id="answers1">
<li>Breakfast Food</li>
<li>Waffles</li>
<li>Calzones</li>
<li>Vegan Superfoods</li>
</ul>
</div>
<div id="question2" class="question">
<p>What do you enjoy doing in your spare time?</p>
<ul id="answers2">
<li>Woodwork in solitary</li>
<li>Work!</li>
<li>Make stop motion 'movies'</li>
<li>Run!</li>
</ul>
</div>
<div id="question3" class="question">
<p>What would you do on "treat yo'self" day?</p>
<ul id="answers3">
<li>Buy a Batman suit and be Batman</li>
<li>Go to my lakehouse by myself</li>
<li>Treat myself to waffles and friends</li>
<li>Run! Or maybe some yoga</li>
</ul>
</div>
<div id="question4" class="question">
<p>What are you likely to be doing on a Friday night?</p>
<ul id="answers4">
<li>Cooking vegan hamburgers</li>
<li>Being alone, maybe with some Scotch</li>
<li>Still working or hanging out with my bestie</li>
<li>Watching Game of Thrones</li>
</ul>
</div>
<div id="question5" class ="question" >
<p>What do you find funny?</p>
<ul id="answers5">
<li>Accounting puns</li>
<li>The Government</li>
<li>Myself</li>
<li>You can laugh at anything!</li>
</ul>
</div>
<div id="results">
<div id="Leslie" class="result">
<p>You get Leslie Knope!</p>
<img src="leslie.jpg" alt="Leslie Knope giving two thumbs up!">
</div>
<div id="Ron" class="result">
<p>You got Ron Swanson!</p>
<img src="ron.png" alt="Ron Swanson smiling">
</div>
<div id="Ben" class="result">
<p>You got Ben Wyatt!</p>
<img src="ben.png" alt="Ben Wyatt">
</div>
<div id="Chris" class="result">
<p>You got Chirs Traeger!</p>
<img src="chris.png" alt="Chris Traeger saying good job">
</div>
</div>
</body>
<script type="application/javascript" src="quiz.js"></script>
</html>【问题讨论】：
-
嗯，对于初学者来说，HTML 有 well established form control elements，你应该先看看它们。否则，我不太明白问题是什么，尝试更好地描述它。将您所有的代码都扔给我们并期望我们阅读它对您来说效果不佳。
-
抱歉我的问题，我知道这不是很有帮助。目前我在点击答案后无法显示下一个问题。
标签： javascript arrays function loops