(Sorry still learning javascript) I was looking to make a checklist quiz which gives different results based on how many checkboxes the user checked off. In this case I have 7 checkboxes, and if the user checks off 1 or less they get the zeroToOne response, while if the user checks off 2-7 check boxes they will get the twotoSeven response.
I keep getting the zerotoOne response no matter how many I checkoff, I believe the result is always 1 for some reason. If someone could please help me come up with a solution here, I'd like to add more results and checkbox statements, up to 25. I also believe I wont actually need an array since I am just using a 1 point value as well.
const numericalValues = new Array();
numericalValues["point"]= 1;
function getScore(){
const form = document.forms["form"];
const quest = form.elements["quiz"];
for(i=0; i<quest.length; i )
{
if(quest[i].checked)
{
score = numericalValues[quest[i].value];
break;
}
}
return score;
};
function getTotal()
{
const totalScore = getScore();
document.getElementById('result').innerHTML =
//"Your total score is: " totalScore;
getComment(totalScore);
}
const zerotoOne = 'It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!';
const twotoSeven = 'I see that among your many talents and attributes, humility is still part of your charm!';
function getComment(score)
{
if (score <=1)
return zerotoOne;
else if (score >=2 && score <= 7)
return twotoSeven;
}
document.getElementById('submit').onclick=getTotal; .quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
} <div class = "quiz-form">
<form id="form" name="form">
<fieldset id="controls">
<p>
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" id="quiz" value="point" />
</label>
</br>
<label> I like to write.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am curious about the world.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</br>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" id="quiz" value="point"/>
</label>
</p>
<p>
<input type="button" name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>CodePudding user response：
First, two housekeeping items:
</br>is not a valid HTML tag. You can use<br>or<br/>.- The
idattribute must be unique, you can't have multiple elements with the sameid.
Second -- there are a number of issues here. The most immediate, obvious cause of your problem is the break statement in getScore. This will stop the for loop as soon as it finds the first checked element and return 1.
The deeper issue here, even if this is removed, is that you're always returning 1 even without the break, because you're just statically setting score to be = 1 on each iteration. What you need to be doing is incrementing the score with each checked box. What you're currently doing is something like this (there's no reason to use an array):
var pointValue = 1;
function getScore(){
for(...){
if(...){
score = pointValue;
}
}
return score;
}
What you need to be doing is something more like:
var pointValue = 1;
function getScore(){
var score = 0;
for(...){
if(...){
score = score pointValue;
}
}
return score;
}
This will increase the score each time a checkbox is found, rather than resetting it to 1.
CodePudding user response：
Edit
See Declan McKelvey-Hembree's answer for a proper answer. This is just cleaned up code. I started writing this before his answer was posted, but it is based on the same points (and modernized a bit).
I dunno how that heck your code was supposed to work, but try this:
function getScore() {
const form = document.forms["form"];
const quest = form.elements["quiz"];
let score = 0;
for (let item of quest) {
if (item.checked) score = 1;
}
return score;
}
function getTotal() {
const totalScore = getScore();
document.getElementById("result").innerHTML = getComment(totalScore);
}
const zeroToOne =
"It is amazing that you already know all of these things about yourself and didnt need to take the quiz. Maybe you just wanted to see all of the possible result responses? Well played!";
const twoToSeven =
"I see that among your many talents and attributes, humility is still part of your charm!";
function getComment(score) {
if (score <= 1) return zeroToOne;
else if (score >= 2 && score <= 7) return twoToSeven;
}
document.getElementById("submit").onclick = getTotal;.quiz-form {
margin-left:auto !important;
margin-right:auto !important;
max-width:700px;
}
#form {
text-align:left;
}
.column {
display: flex;
flex-direction: column;
}<div >
<form id="form" name="form">
<fieldset id="controls">
<p >
<label> I enjoy reading for fun.
<input type="checkbox" name="quiz" />
</label>
<label> I like to write.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy other forms of self-expression, such as music and art.
<input type="checkbox" name="quiz" />
</label>
<label> I find discussing ideas with other people exciting.
<input type="checkbox" name="quiz" />
</label>
<label> I enjoy thinking through complex challenges.
<input type="checkbox" name="quiz" />
</label>
<label> I am curious about the world.
<input type="checkbox" name="quiz" />
</label>
<label> I am interested in a wide range of subjects.
<input type="checkbox" name="quiz" />
</label>
</p>
<p>
<button name="submit" id="submit" value="Submit" />
</p>
<p id="result"></p>
</fieldset>
</form>
</div>