0

I have a code here.

  1. It is creating the correct noOfChoices when I console.log it, I can see it. But it is not executing the if (noOfChoices === "2") {} scenarios. Can someone please help make this work (see the commented out area in code), thanks.

  2. Also, how can I run diceRoll during this function then use the constants (randomNumber1- randomNumber4) that I got in this roll in the code following? (see the commented out part towards the end)


<!--begin snippet: js hide: false console: true babel: false -->

<!--language: lang - js-->

    let links = document.querySelectorAll('#list li')
links.forEach((el) => {
    el.addEventListener('click', (event) => {
        let numberOfChoices = event.target.innerText
        document.getElementById('dropdownMenu').innerHTML = `${numberOfChoices}<span class="caret"></span>`

        if (numberOfChoices === "2") {
            $("#img3, #img4, .threeChoices, .fourChoices").addClass("invisible")
        }
        if (numberOfChoices === "3") {
            $("#img4, .fourChoices").addClass("invisible");
            $("#img3, .threeChoices").removeClass("invisible")
        }
        if (numberOfChoices === "4") {
            $("#img3, #img4, .threeChoices, 
                .fourChoices ").removeClass("
        invisible ");
    }
    })
})

// Responding to Submit
document.getElementById("submit").addEventListener("click", function (e) {
    e.preventDefault();

    // Storing Data into variables
    var choice1 = $("#choice1").val();
    var choice2 = $("#choice2").val();
    var choice3 = $("#choice3").val();
    var choice4 = $("#choice4").val();
    var noOfChoices = $("#dropdownMenu").text();

    // Rotate animation
    $(".dice").addClass("rotate");

    // Changing text to user input
    $("#caption1").html(choice1);
    $("#caption2").html(choice2);
    $("#caption3").html(choice3);
    $("#caption4").html(choice4);
    console.log(noOfChoices);

    // THE FOLLOWING IS NOT WORKING DESPITE noOfChoices BEING CORRECT IN THE PREVIOUS LINE
    if (noOfChoices === "2") {
        $("#caption1, #caption2").removeClass("invisible");
        $("#caption3, #caption4").addClass("invisible");
    }

    if (noOfChoices === "3") {
        $("#caption1, #caption2, #caption3").removeClass("invisible");
        $("#caption4").addClass("invisible");
    }

    if (noOfChoices === "4") {
        $(".caption").removeClass("invisible");
    }

    $("#submit").html("Again");


    // SEE HERE IS THE SECOND PROBLEM:
    // Rolling Dice
    diceRoll();

    // Determining winner
    if (noOfChoices === "2") {
        if (randomNumber1 > randomNumber2) {
            $("#title").html(choice1 + "wins! 🏆");
        } else if (randomNumber2 > randomNumber1) {
            $("#title").html(choice2 + "wins! 🏆");
        } else if (randomNumber2 = randomNumber1) {
            $("#title").html("Oops, try again!");
        }


    }

})



function diceRoll() {
    // 1st dice
    var randomNumber1 = Math.floor(Math.random() * 6 + 1);
    var Image1 = "dice" + randomNumber1 + ".png";
    document.querySelectorAll("img")[1].setAttribute("src", Image1);

    // 2nd dice
    var randomNumber2 = Math.floor(Math.random() * 6 + 1);
    var Image2 = "dice" + randomNumber2 + ".png";
    document.querySelectorAll("img")[2].setAttribute("src", Image2);

    // 3rd dice
    var randomNumber3 = Math.floor(Math.random() * 6 + 1);
    var Image3 = "dice" + randomNumber3 + ".png";
    document.querySelectorAll("img")[3].setAttribute("src", Image3);

    // 4th dice
    var randomNumber3 = Math.floor(Math.random() * 6 + 1);
    var Image4 = "dice" + randomNumber3 + ".png";
    document.querySelectorAll("img")[4].setAttribute("src", Image4);
}

<!--end snippet-->
Improve this question
1
  • 1. Ensure you're comparing the correct types. Try console.log(typeof noOfChoices, noOfChoices); to confirm. Then try comparing with correct typing: if(String(noOfChoices) === "2"). 2. You could try returning results from the function: var [randomNumber1, randomNumber2] = diceRoll(); and return [randomNumber1, randomNumber2]; inside diceRoll. Commented Aug 24, 2020 at 8:35

1 Answer 1

Reset to default
1

EDIT: on hindsight you're using .innerText which returns strings anyways. So this answer is probably wrong, but I'll leave it here nonetheless. @Eugen Sunic's comment should be the correct answer.

Most probably it's a type problem, try using the number type. The differences are shown here:

if (numberOfChoices === "2") {
                        ^ this is a string

if (numberOfChoices === 2) {
                        ^ this is a number

Or if you want type coercion (which I wouldn't recommend) don't use the === operator but ==, like this:

if (numberOfChoices == "2") {
                     ^ coerce numberOfChoices to string, then compare strings

Both solutions should work but the first one is better in my personal opinion because it leads to stricter code practices.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Where is his comment please?
it is gone, but it was about trimming the string like this: .innerText.trim().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.