не знаю, почему не работает второе условие if else

Question

введите описание изображения здесь Сценарий: Даже если я выберу изображение и дату, код не работает. Также, если я выбираю год 2020, скажем, выбираю первое изображение, оно должно go указанную страницу перенаправления ... когда я выбираю год 2021 и то же первое изображение, оно должно go на другую страницу ... Если я использую остальное, если дать условие "2020 n img", оно не работает.

Код: «Кнопка отправки»

<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>

Для изображений:

<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>

Выбор даты:

    <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

Ну, я думаю, что я довольно много для тебя кодировал. Там было много ошибок. Во-первых, вы просто не можете проверить логическое значение с помощью строки, как вы это делали или я. Булевы имеют только true или false. Эта строка кода была просто фиктивной ошибкой, как я объяснил:

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

Теперь, вот что я сделал, сохранив, что вы уже встроили jquery в свою страницу. Не стесняйтесь спрашивать, если есть какие-либо сомнения.

        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("!!!!")
                }
            }
        });

Теперь вы сможете решить любую другую проблему. Там может быть микс соответствия div ID, чтобы посмотреть на. Вы можете заменить свой код js для кнопки отправки на этот и проверить ошибки. Спасибо !!!

Answer 2

Вы добавили библиотеки jquery и jqueryui? Если нет, скопируйте следующие строки в начале, например, раздел заголовка, своего кода:

        <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>

Кроме того, исправьте эту строку:

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

этой строкой:

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