Logi c для перенаправления на следующую страницу с помощью Jquery Year Picker и Swiper Slider при выборе одного изображения

Question

Я новичок в javascript. На странице я создал изображения слайдеров, а внизу разместил Jquery Выбор даты (он выбирает год).

Сценарий: когда я выбираю одно изображение на слайдере и выбираю год, оно должно перенаправляться на следующую страницу.

Кнопка отправки:

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

Код:

<script>
  function Redirect()
  {
      window.location="sample.jsp"
  }
  </script>

<div class="swiper-slide" style="background-image:url(./img/Eco.png)" onclick="Redirect();" id="eco"><b>Eco</b></div>

Год Jpicker:

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

html:<p align="center"><b>Year:</b> <input type="text" id="datepicker"></p>

Этот код перенаправляет на следующую страницу, когда я нажимаю на этом изображении. Но мне нужно перенаправить, когда я выбираю год и изображение, и, нажимая на отправку, он должен переориентироваться на следующую страницу. Может кто-нибудь, пожалуйста, помогите в этом.

Answer 1

Ваш код предлагает вызывать onclick="Redirect();" при нажатии на изображение.

Здесь можно сделать две вещи,

1. В Redirect, проверьте, если дата выбирается пользователем, если нет, предлагает выбрать дату и один раз выбрать, а затем перенаправить.
2. Создать другую кнопку submit. Нажимая image и date picker, сохраняйте другое логическое значение, которое будет иметь значение true. При нажатии submit проверьте, что оба логических значения имеют значение true, а затем перенаправьте, иначе выведите сообщение об ошибке для логического значения, которое false

let _img = document.getElementById("img")
let _picker = document.getElementById("picker")
let _btn = document.getElementById("btn")

let isImgClicked = false
let isDatePicked = false
_img.addEventListener("click", () => {
  isImgClicked = true
})
_picker.addEventListener("click", () => {
  isDatePicked = true
})
_btn.addEventListener("click", () => {
  if (!isImgClicked)
    alert("Image Not clicked")
  else if (!isDatePicked)
    alert("Date not picked")
  else
    alert("All good! Need to reirect")
})

<img src="https://res.cloudinary.com/demo/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/lady.jpg" id="img">

<div id="picker">
  Dummy date picker
</div>

<button id="btn">
  Submit
</button>

Выше базовое c кодовое представление 2-го подхода в ванили javascript.