Блог

Главная - Вопросы по программированию - Записать выбранное значение с помощью переключателя в Javascript

Записать выбранное значение с помощью переключателя в Javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать выпадающий список с переключателями, в котором вы можете выбрать несколько разных стилей для веб-страницы.

Сначала я хочу попробовать console.log всякий раз, когда выбираю другой цвет. Каждый раз, когда я выбираю другой цвет, он по-прежнему регистрирует черный цвет.

Это мой HTML-код:

 <form>
<label><input type="radio" name="styleColor" id="black" checked="checked" onclick="styleChange()"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="red" onclick="styleChange()">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="green" onclick="styleChange()">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="blue" onclick="styleChange()">Blue</label>
</form>

И мой код Javascript:

 function styleChange() {
   if (document.getElementById("black").selected = true) {
       console.log("Color selected: Black")
   }
   else if (document.getElementById("red").selected = true) {
       console.log("Color selected: Red")
   }
   else if (document.getElementById("green").selected = true) {
       console.log("Color selected: Green")
   }
   else if (document.getElementById("blue").selected = true) {
       console.log("Color selected: Blue")
   }
}

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

1. Пока вы используете onclick , вы также можете использовать onclick="styleChange('red )»‘ (например). И использовать == для сравнения, а не = (присвоение).

Ответ №1:

Просто измените selected на checked и не используйте single equal в условии if, оно должно быть double equal . код ниже.

 function styleChange() {
  
   if (document.getElementById("black").checked) {
       console.log("Color selected: Black")
   }
   else if (document.getElementById("red").checked) {
       console.log("Color selected: Red")
   }
   else if (document.getElementById("green").checked) {
       console.log("Color selected: Green")
   }
   else if (document.getElementById("blue").checked) {
       console.log("Color selected: Blue")
   }
}

демонстрация https://jsbin.com/giberegora/edit?html ,js, консоль, вывод

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

1. Спасибо, я думал, что уже пробовал это, но, должно быть, я допустил небольшую ошибку. jsbin также был действительно полезен!

Ответ №2:

Вы можете добавить прослушиватель событий onChange к каждой переключателю и вызывать метод всякий раз, когда происходит событие onChange.

 document.querySelectorAll("input").forEach(item => {
       item.addEventListener("change", () => {
          console.log(item.id)
       })
})  
 <form>
<label><input type="radio" name="styleColor" id="black" checked="checked"/>Black</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="red">Red</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="green">Green</label>
<div class="dropdown-divider"></div>
<label><input type="radio" name="styleColor" id="blue">Blue</label>
</form>

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

1. Спасибо, что нашли время ответить! Если бы я должен был регистрировать только цвет, я бы использовал это. Но поскольку я хочу ввести определенные идентификаторы, я не думаю, что смогу использовать ваши.

Ответ №3:

Я настоятельно рекомендую вам использовать jquery, он прост в использовании и более производителен по сравнению с кодом javascript, и еще одна вещь, которую я меняю «id» на «значение», чтобы проверить, какой переключатель выбран, пожалуйста, проверьте приведенный ниже код.

 <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
  <form>
    <label><input type="radio" name="styleColor" value="black" onclick="styleChange()"/>Black</label>
    <div class="dropdown-divider"></div>
    <label><input type="radio" name="styleColor" value="red" onclick="styleChange()">Red</label>
    <div class="dropdown-divider"></div>
    <label><input type="radio" name="styleColor" value="green" onclick="styleChange()">Green</label>
    <div class="dropdown-divider"></div>
    <label><input type="radio" name="styleColor" value="blue" onclick="styleChange()">Blue</label>
    </form>
</body>
<script>
function styleChange(){
      alert($("input[name='styleColor']:checked").val());
    }
</script>
</html>

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

1. Спасибо за комментарий! Обычно я бы использовал jquery, но поскольку я работаю с ASP.NET MVC, я действительно не знаю, как использовать jquery, и поскольку это не будет общедоступный веб-сайт, и я буду использовать только небольшие вещи javascript, я действительно не думал об использовании jquery.

2. это очень просто и повышает производительность вашего приложения, но в первый раз, возможно, это займет некоторое время, но в долгосрочной перспективе это даст вам хорошие преимущества tutorialspoint.com/mvc_framework/mvc_framework_bundling.htm