mercredi 8 janvier 2020

Simple jQuery testing - if/else-if statement not behaving as expected

I'm working on an application for a friend and am working on some basic user input testing. I have the following HTML

    <h4>Player 1 Name</h4>
      <input type="text" id="nameP1" class="form-control" required="">
      <h4>Player 2 Name</h4>
      <input type="text" id="nameP2" class="form-control" required="">
      <h4>Player 1 Race</h4>
      <input type="text" id="raceP1" class="form-control" required="">
      <h4>Player 2 Race</h4>
      <input type="text" id="raceP2" class="form-control" required="">
      <h4>Round Type (Best of...Enter 3, 5, or 7)</h4>
      <input type="text" id="roundType" class="form-control" required="">
      <hr>

      <!-- Submit Button -->
      <button type="submit" class="btn btn-secondary btn-lg btn-block" id="go"><i class="fa fa-check-circle"
        aria-hidden="true"></i>Go!</button>

and JavaScript:

var newRoundData = {};
var roundType;
// Capture the form inputs
$("#go").on("click", function (e) {
    e.preventDefault();

    // Form validation
    function validateForm() {
        var isValid = true;
        $(".form-control").each(function () {
            if ($(this).val() === "") {
                isValid = false;
            }
        });
        return isValid;
    }
    // If all required fields are filled
    if (validateForm()) {
        // Create an object for the user's data
        newRoundData = {
            nameP1: $("#nameP1").val().trim(),
            nameP2: $("#nameP2").val().trim(),
            raceP1: $("#raceP1").val().trim(),
            raceP2: $("#raceP2").val().trim(),
            roundType: $("#roundType").val().trim()
        };
        console.log(newRoundData) // line 25
        roundType = newRoundData.roundType
        console.log(roundType) // line 27

        if (roundType === 3) {
            console.log("checking round type", bestOf)
            console.log("best of 3 selected")
        } else if (roundType === 5) {
            console.log("best of 5 selected")
        } else if (roundType === 7) {
            console.log("best of 7 selected")
        }

    }; 
});

The newRoundData object is getting populated as expected, and log is outputted as expected for line 25 and 27 in the javascript code:

but the if/else if statement after line 27 is not outputting anything. It's been a while since I've built something from scratch - I'm properly stumped on this one. Any help would be awesome - thanks in advance!

Aucun commentaire:

Enregistrer un commentaire