javascript - Updating Array comparison function for strings -
i'm working pre-written code quiz trivia game, , have update games question choices number values strings. don't know change in code user choice compared correct answer. currently, number answers, code compares array placement of correct choice in choices array, correctanswer variable. best guess change has occur in displayscore function shown @ bottom.
a current question object:
{ question: "what 2*5?", choices: [2, 5, 10, 15, 20], correctanswer: 2 }
and updated question object be:
{ question: "which list contains words not names of shoe types:" choices:[ "a. oxford, jelly, boat, clogs, stiletto, mary jane", "b. loafer, gladiator, wedge, mule, platform", "c. pump, moccasin, wingtip, sneaker, derby, monk", "d. chalupa, dogler, hamster, croonley, frankfurt"], correctanswer : "d. chalupa, dogler, hamster, croonley, frankfurt" }
currently parts of code computing correct answer are:
//array containing user choices var selections = []; // reads user selection , pushes value array function choose() { selections[questioncounter] = +$('input[name="answer"]:checked').val(); } // computes score , returns paragraph element displayed function displayscore() { var score = $('<p>',{id: 'question'}); var numcorrect = 0; (var = 0; < selections.length; i++) { if (selections[i] === questions[i].correctanswer) { numcorrect++; } } }
credits:
as mentioned jonas w in comments, problem +
before $().val()
. because didn't upvotes nor explanation, thought i'd elaborate:
the bug
when retrieving value input, value string
. correct answer in initial example number
. because compare using ===
, 2 not equal: 2 === "2"
returns false
.
adding +
operator short way of "casting" value number. (opinion:) many people dislike because can easy miss , hard interpret beginners. perhaps clearer way write number(x)
or use parseint
or parsefloat
.
the problem is, once required value string
, +
operator try make number non-numeric-like string. outcome be, quite named, nan
, stands not number , can checked using isnan
i.e.: works:
const required = 2; const input = "2"; required === +input; // 2 === 2 -> true
breaks:
const required = "hello world"; const input = "hello world"; required === +input; // "hello world" === nan -> false
how fix it
concluding: removing +
fix string based answers, break number based answers.
my advice remove +
, make sure answer arrays contain strings. (for example, mapping using [2, 3, 4].map(string)
or tostring
)
other possible fixes include:
- using
==
operator insidedisplayscore
compare user input required value (not recommended) - adding
switch
statement type of array's value pick custom comparison methodsnumber
,string
, perhaps other values. - using
index
in array instead of value, suggested user bergi (might makequestion
object bit harder read, though)
examples
some examples can feel differences between values:
var val = $("input").val(); console.log("typeof val ->", typeof val); console.log("typeof 2 ->", typeof 2); console.log("val == 2 ->", val == 2); console.log("val === 2 ->", val === 2); console.log("+val === 2 ->", +val === 2); console.log("number('2') === 2 ->", number(val) === 2); var nonnumericstring = "hello world"; console.log("+'hello world' ->", +nonnumericstring); var answers = [2, 3, 4]; console.log("'2' in [2, 3, 4] ->", answers.includes(val)); console.log("'2' in [2, 3, 4].map(string) ->", answers.map(string).includes(val));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input value="2">
Comments
Post a Comment