Требование выбора переключателя в Javascript

Я новичок в JS, пытаюсь создать переключатель с двумя вариантами (влево/вправо), в котором необходимо выбрать один из двух вариантов для продолжения программы, иначе он отобразит экран ошибки.

У меня есть код, который либо не позволит участнику продолжить работу независимо от того, что он нажимает (т. е. ошибка выскакивает независимо от того, что он делает), либо код, который позволит участнику продолжить работу несмотря ни на что (т. е. программа продолжится, даже если он не нажмет). выберите один из вариантов.) Я чувствую, что это может быть что-то с моими логическими операторами, но я действительно не уверен. Я пробовал использовать ручное XOR, и это, похоже, не проблема.

Я использую адаптированный код, поэтому, пожалуйста, дайте мне знать, если есть что-то еще, что я могу/должен включить!

<div class = "radio"><label><input id = "option1"  name = "option1" type = "radio" value = "Right"  />Right</label></div>
<div class = "radio"><label><input id = "option1" name = "option1" type = "radio" value = "Left" />Left</label></div>

Код, который вызывает ошибку несмотря ни на что:

<input onclick = "function filledOut(id) { return (document.getElementById(id).value == 'Left')} if (filledOut('option1') ) { next(); }else{ alert('Please provide a response.'); }" type = "button" value = "Continue" /> </div>
</div>

Код, который заставляет программу продолжать работу:

<input onclick = "function filledOut(id) { return ((document.getElementById(id).value == 'Left')|| (document.getElementById(id).value == 'Right'))} if (filledOut('option1') ) { next(); } else{ alert('Please provide a response.'); }" type = "button" value = "Continue" /> </div>
</div>

Для справки в будущем подобные вопросы лучше задавать в обзоре кода: codereview.stackexchange.com.

computercarguy 12.05.2019 03:56

Примечание: тег <input> не использует и не требует закрывающей косой черты и никогда не имел ее в HTML.

Rob 12.05.2019 03:58

Спасибо всем за помощь. Это мой первый проект JS (заброшенный в глубокий конец), но я продолжу в том же духе!

J R-M 13.05.2019 05:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
380
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вам нужно изменить идентификатор на что-то другое. В случае переключателей «имя» — это группа переключателей. Вам не нужны идентификаторы, если только вы не собираетесь индивидуально просматривать каждый элемент, и если вы даете им идентификаторы, они должны отличаться от всех других идентификаторов, а также от атрибутов «имя».

https://www.w3schools.com/tags/att_input_type_radio.asp

<input id = "optionRight" name = "groupName" type = "radio" value = "Right" /> <input id = "optionLeft" name = "groupName" type = "radio" value = "Left" />

Кроме того, вы можете сделать один из переключателей выбранным по умолчанию.

Как выбрать переключатель по умолчанию?

<input id = "option1" name = "groupName" type = "radio" value = "Right" checked = "checked" />

Спасибо за ваш комментарий! После изменения этого мне нужно изменить свой код, чтобы использовать getElementsByName (groupName)? Ни это, ни оставление кода как getElementsByID(inputID), похоже, не исправляет это. И, к сожалению, поскольку это психологический эксперимент, я не могу позволить ему начать с кнопки по умолчанию.

J R-M 12.05.2019 04:00

Есть несколько разных способов получить то, что вы ищете, поэтому я оставлю вам еще одну ссылку и позволю вам выяснить, какой из них вам действительно нужен. stackoverflow.com/questions/9561625/…

computercarguy 12.05.2019 04:03

Я понял, что вам нужно показать ошибку, если ничего не проверено, и продолжить, если один из них проверен.

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

function isChecked(id){//Instead of filledOut
  return document.getElementById(id).checked;
 //.checked returns true or false
}
if (isChecked('option1') || isChecked('option2')){
 next();
}else{
 alert("Your error message")
}

Еще одна функция для получения значения, если оно вам нужно:

function getCheckedBtnValue(){
  if (isChecked('option1')) return document.getElementById('option1').value
  if (isChecked('option2')) return document.getElementById('option2').value
  return null
}
//You can also use this function to check if any of them is checked
const value = getCheckedBtnValue();
if (value){
 next();
}else{
 alert("Your error message");
}

Кроме того, старайтесь не писать JavaScript внутри HTML-элементов, которые часто трудно читать. Продолжайте использовать JavaScript.

К сожалению, ОП еще не зашел так далеко. Как упоминалось в моем ответе, оба его переключателя имеют одинаковый идентификатор, который также совпадает с атрибутом «Имя», поэтому сначала он должен это исправить, а затем он может использовать ваше предложение. К сожалению, это означает, что ваш ответ не касается вопроса.

computercarguy 12.05.2019 04:06

да, я упомянул об этом в первых двух строчках.

Mahmoud Atwa 12.05.2019 04:10
Ответ принят как подходящий
<form name = "formName">
    <input type = "radio" name = "option1" id = "option1" value = "Right"/>Right
    <input type = "radio" name = "option2" id = "option2" value = "Left"/>Left
</form>


<input onclick = "checkResponse()" type = "button" value = "Continue" />

Функция checkResponse проверит, выбраны ли какие-либо параметры, когда пользователь нажимает кнопку «Продолжить».

<script type = "text/javascript">
    function checkResponse(){
        if (isChecked('option1') || isChecked('option2')){
            next();
        }else{
            alert("Your error message")
        }
    }

    function isChecked(id){

     return document.getElementById(id).checked; //returns true if any options are selected

    }

</script>

Хорошо знать! Ваше здоровье! @JR-M

Hari Krishnan K R 13.05.2019 05:41

Радиокнопки не всегда выбирают значение по умолчанию, если программист не говорит об этом.

computercarguy 13.05.2019 17:52

Перечитав это снова, вы заново изобрели колесо, воссоздав точные результаты переключателя с флажками. Это нехороший UX, так как пользователь не поймет эту функциональность. Используйте переключатели и флажки для того, для чего они предназначены, а не для создания путаницы у пользователя.

computercarguy 13.05.2019 18:33

У меня была дезинформация о том, что переключатель будет выбирать значение по умолчанию при загрузке страницы. Спасибо за совет, очень признателен.

Hari Krishnan K R 14.05.2019 03:43

Другие вопросы по теме