I want to execute a jQuery condition based on the .html() method. When I manually assign "A" to slot1 variable, my condition works. However, when I assign the "A" to the slot1 variable from the #set1 element via the .html() method, the "A" is well assigned and shows in console.log as slot1 returns "A", but my condition doesn't work (#result stays stuck on "no").
Any idea how to get the condition working with the .html() method?
// EXECUTING FUSION
$("#fusion").click(function(){
slot1 = $("#set1").html();
console.log(slot1);
if (slot1 == "A") {
$("#result").html("ok");
}
else {
$("#result").html("no");
}
});
The code below works. Yours works too but fails in some circumstances. I believe the issues you are having is due to white space issues and how you are getting your 'slot1' input. If you are getting .html() from say, a contenteditable div like I have shown in my code below, then you need to remove the white spaces like I have done below because simply doing .trim() won't work since the spaces are encoded as   . If this helps you, an upvote would be appreciated
$("#fusion").click(function(){
let slot1 = $("#set1").html();
console.log(slot1);
slot1 = slot1.replace(/ /g, '');
console.log(slot1);
if (slot1.trim() === "A") {
$("#result").html("ok");
console.log("ok");
}
else {
$("#result").html("no");
console.log("no");
}
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="set1" contenteditable="true">This is where you type input.</div>
<p id="result">Result</p>
<button type="button" id="fusion" class="btn btn-primary buttonSignup" >CREATE ACCOUNT NOW<i class="iconRequired icon-chevron-right"></i></button>