If/else javascript function not working every time -

setting if/else function in javascript snippet:

function comparestatus() {   if(valuetruebutton === statusrandomrapper) {     alert("both status true");   } else {     alert("nah, status different");   } } 

the 2 variables use come from:

var valuetruebutton = document.getelementbyid("truebutton").value; 

and

var rappera = {firstname:"a$ap rocky", image:"test.jpg", clip:"test.com", status:"true", smallthumbnail: "test.png"}; 

the true button comes line:

 <button id="truebutton" onclick="comparestatustruebutton()" style="background-color: #4bcc92; border: none; font-size: 2em;" value="true">true</button> 

full code reference here. assign value 2 elements in page , try compare function. most of times works correctly, won't work.

i have tried debug printing in console both values:

 console.log("randomrapper.name:" + randomrapper.firstname + ", randomrapper.status: " +  randomrapper.status + " valuetruebutton: " +  valuetruebutton + " valuefalsebutton: " +  valuefalsebutton ) 

and added typeof make sure value has same format. in [ clicked 'false' button has 'false' value assigned, , if rapper has 'status = false' won't detect both values same value.

*edit: live page see issue live https://principal-audits-75550.netlify.com

*2nd edit: added console.log typeof, of them 'string'

the problem

in code, declare two values:

var statusrandomrapper = rappers[math.floor(math.random()*rappers.length)].status; var randomrapper = rappers[math.floor(math.random()*rappers.length)]; 

statusrandomrapper status of random rapper, , randomrapper object containing a different rapper.

so, when go check value, you're checking against different rapper.

the solution

what need instead this:

var randomrapper = rappers[math.floor(math.random()*rappers.length)]; var statusrandomrapper = randomrapper.status; 

this code makes 1 rapper (randomrapper), , sets statusrandomrapper status field of object.