Блог

Главная - Вопросы по программированию - Перенаправление на другую html-страницу после выбора с помощью блочного javascript

Перенаправление на другую html-страницу после выбора с помощью блочного javascript

#javascript #html #css

Вопрос:

Пробовал использовать разные способы, но не смог заставить это работать. Я хочу перенаправить на другую html-страницу после того, как пользователь выберет нужный вариант. например, когда пользователь выбирает здесь «дханмонди». это перенаправит их на «dhanmondi.html». Я попробовал использовать окно.Расположение.href использует оператор if внутри searchbox.value, но не смог заставить его работать.

 const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");

  searchBox.value = "";
  filterList("");
  if (optionsContainer.classList.contains("active")) {
    searchBox.focus();
  }
});

optionsList.forEach(o => {
  o.addEventListener("click", () => {
    selected.innerHTML = o.querySelector("label").innerHTML;
    optionsContainer.classList.remove("active");
  });
});

searchBox.addEventListener("keyup", function(e) {
  filterList(e.target.value);
});

const filterList = searchTerm => {
  searchTerm = searchTerm.toLowerCase();
  optionsList.forEach(option => {
    let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
    if (label.indexOf(searchTerm) != -1) {
      option.style.display = "block";
    } else {
      option.style.display = "none";
    }
  });
}; 
 <div class="container">
      <h2>Select Your Location</h2>

      <div class="select-box">
        <div class="options-container">
          <div class="option">
            <input
              type="radio"
              class="radio"
              id="automobiles"
              name="category"
            />
            <label for="automobiles">Dhanmondi</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="film" name="category" />
            <label for="film">Bashundhara</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="science" name="category" />
            <label for="science">Banani</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="art" name="category" />
            <label for="art">Gulshan</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="music" name="category" />
            <label for="music">Lalbag</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="travel" name="category" />
            <label for="travel">Cantonment</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="sports" name="category" />
            <label for="sports">Dummy</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="news" name="category" />
            <label for="news">Dummy</label>
          </div>

          <div class="option">
            <input type="radio" class="radio" id="tutorials" name="category" />
            <label for="tutorials">Dummy</label>
          </div>
        </div>

        <div class="selected">
          Select Area
        </div>

        <div class="search-box">
          <input type="text" placeholder="Start Typing..." />
        </div>
      </div>

Комментарии:

1. Куда ты их положишь window.location.href ?

2. Добавьте атрибут value к вашим переключателям (который будет содержать путь, на который вы хотите перенаправить), добавьте прослушиватель щелчков для ваших переключателей. Затем сделайте окно. местоположение.href(e.значение) в вашей функции для прослушивателя щелчков.

Ответ №1:

Во-первых, добавьте атрибут onClick во входной HTML-элемент, как я показал ниже. Что это делает? Он вызывает функцию JavaScript.

 <input type="radio" class="radio" id="film" name="category" onclick="myFunction()"></input>

Теперь определите эту функцию в JS и используйте ее для перенаправления пользователя.

JS:

 function myFunction(){
  window.location.replace("http://www.example.com");
}
Метки: