not sure why the second if else condition is not working

Question

enter image description hereScenario: Even if i select the image and date the code is not working. Also if i select year 2020 n say am selecting the first image it should go the specified redirecting page... when i select the year 2021 n the same first image it should go to another page...If i use the else if giving the condition "2020 n img" it is not working.

Code: "For submit Button"

<p align=center>
            <input type="submit" value="submit" id="button">
        </p>





<script type="text/javascript">
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _picker = document.getElementById("picker");
let _btn = document.getElementById("button");

let isImgClicked = false;
let isDatePicked = false;
_img.addEventListener("click", function(){
  isImgClicked = true;
});
_img1.addEventListener("click", function(){
  isImgClicked = true;
});
_img2.addEventListener("click", function(){
  isImgClicked = true;
});
_picker.addEventListener("click", function(){
  isDatePicked = true;
});
_btn.addEventListener("click", function(){

              if(!isImgClicked || !isDatePicked)
              {
                  alert("select the Year and Click the car image");

              }
              else 
                 {
                  if((isImgClicked == "img") && (isDatePicked == "2020"))
                     {
                        window.location.replace("sample.html");
                     }
                  else if((isImgClicked == "img") && (isDatePicked == "2019"))
                     {
                   window.location.replace("sample1.html");
                     }
                  else
                      {
                        if((isImgClicked == "img1") && (isDatePicked == "2019"))
                  {
                  window.location.replace("sample2.html");
                  }
              else if((isImgClicked == "img1") && (isDatePicked == "2020"))
                  {
                   window.location.replace("sample3.html");
                  }
              else
                  {
                  alert("!!!!")
                  }
                 }
                 }
        });
</script>

For images:

<div class="swiper-container">
            <div class="swiper-wrapper">
                <form>
                    <div id="img" class="swiper-slide"
                        style="background-image: url(./img/nature.png)">
                        <b>nature</b>
                    </div>
                </form>
                <div id="img1" class="swiper-slide"
                    style="background-image: url(./img/nature1.png)">
                    <b>nature1</b>
                </div>
                <div id="img2 "class="swiper-slide"
                    style="background-image: url(./img/nature2.png)">
                    <b>nature2</b>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

Date Picker:

    <div id="picker">
        <p align="center">
            <b>Year:</b> <input type="text" id="datepicker">
        </p>
    </div>
<script>
  $(function() {
        $('#datepicker').datepicker({
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'yy',
            onClose: function(dateText, inst) { 
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, 1));
            }
        });

       $("#datepicker").focus(function () {
            $(".ui-datepicker-month").hide();
            $(".ui-datepicker-calendar").hide();
        });

    });
  </script>[enter image description here][2]

Answer 1

Well, I think I have coded pretty much for you. There were lots of errors in there. First of all, you simply could not check boolean with string like you did or I did. Boolean only have true or false. This line of code was just so dummy mistake as I explained:

isImgClicked.equals("img1")  // This will always be false as isImgClicked is boolean only

Now, here is what I have done, keeping that you have already embedded jquery in your page. Feel free to ask, if there is any doubt.

        let _img = document.getElementById("img");
        let _img1 = document.getElementById("img1");
        let _img2 = document.getElementById("img2");
        let _btn = document.getElementById("button");

        let isImgClicked = false;
        let isDatePicked = false;

        /* If any event is clicked!!!! */
        $(document).on('click', function(e){
            clickId = e.target.id;           // Get id of clicked element
            pickedDate = $('#datepicker').val();      // Get value of date picked

            // If picked date value is not null, means date is picked
            if(pickedDate.length > 0){
                isDatePicked = true;
            }
            if(clickId == 'img' || clickId == 'img1' || clickId == 'img2'){
                isImgClicked = true;
                selectedImg = clickId;  // Get id of selected image
            }
            if(clickId == 'button')
            {
                if(!isImgClicked)
                {
                    alert("select the Year and Click the car image");
                }
                else 
                {
                    if((selectedImg == "img") && (pickedDate == "2020"))
                        window.location.replace("sample.html");
                    else if((selectedImg == "img") && (pickedDate == "2019"))
                        window.location.replace("sample1.html");
                    else if((selectedImg == "img1") && (pickedDate == "2019"))
                        window.location.replace("sample2.html");
                    else if((selectedImg == "img1") && (pickedDate == "2020"))
                        window.location.replace("sample3.html");
                    else
                        alert("!!!!")
                }
            }
        });

You should be able to fix any other problem by now. There may be div id's mix match to look upto. You could replace your js code for submit button with this one and check for the errors. Thank you!!!

Answer 2

Did you add the jquery and jqueryui libraries? If not, copy the following lines at the beginning, e.g. head section, of your code:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Moreover, correct this line:

<div id="img2 "class="swiper-slide"

with this line:

<div id="img2"class="swiper-slide"