Если еще вопрос о состоянии

Question

Я делаю викторину для своего сайта. Я проверяю вход для каждого вопроса. Первый - это просто имя пользователя. Я получил эту работу для работы с использованием инструкции if else, что я пытаюсь сделать сейчас, это проверить переключатель после проверки текстового поля. Итак, если пользователь вводит свое имя, а затем не отвечает на следующий вопрос, появляется окно с предупреждением об их ответе. Я также делаю это для флажков и выпадающего меню. На основе цвета, выбранного на радиокнопках, фон сайта изменится. Любая помощь по любому из вопросов была бы наиболее оценена.

JavaScript

function NameBox() { 
    var x = document.forms["Hogwarts"]["firstname"].value; 
    if (x == null || x == "") { 
     window.alert("Name must be filled out!"); 
     return false; 
    } else { 
     RadioColors(); 
     return true; 
    } 
} 

function RadioColors() { 
    If(document.getElementById('red' || 'blue' || 'green' || 'yellow').checked) 
    window.alert("Radio Selected"); 
    else { 
     window.alert("Radio Not Selected"); 
    } 
} 

HTML

<div id="main"> 
    <h1>Assignment 2: Sorting Hat Quiz<h1> 
<form name="Hogwarts" onsubmit= "return NameBox()" > 

    <fieldset> 

    <legend>Which Hogwarts House Are You In?</legend> 

    <br> 

<h1>Please Enter Your First Name</h1> 

    <input type="text" name="firstname" value=""> 
    <br> 

<h1>What is your favorite color?</h1> 

    <input type="radio" name="color" value="red">Red 
    <br> 
    <input type="radio" name="color" value="blue">Blue 
    <br> 
    <input type="radio" name="color" value="green">Green 
    <br> 
    <input type="radio" name="color" value="yellow">Yellow 
    <br> 

<h1>Which of these values do you possess?</h1> 

    <input type="checkbox" name="gry1" value="chivalry">Chivalry 
    <br> 
    <input type="checkbox" name="sly1" value="Cunning">Cunning 
    <br> 
    <input type="checkbox" name="huf1" value="loyalty">Loyalty 
    <br> 
    <input type="checkbox" name="rav1" value="intelligence">Intelligence 
    <br> 
    <input type="checkbox" name="gry2" value="brave">Brave 
    <br> 
    <input type="checkbox" name="sly2" value="innovative">Innovative 
    <br> 
    <input type="checkbox" name="huf2" value="patience">Patience 
    <br> 
    <input type="checkbox" name="rav2" value="logical">Logic 
    <br> 
    <input type="checkbox" name="gry3" value="confident">Confident 
    <br> 
    <input type="checkbox" name="sly3" value="Ambitious">Ambitious 
    <br> 
    <input type="checkbox" name="huf3" value="friendly">Friendly 
    <br> 
    <input type="checkbox" name="rav3" value="creative">Creative 
    <br> 

<h1>What is your favorite animal?</h1> 

    <select name="animal"> 
     <option value="selectanimal">Select an Animal</option> 
     <option value="snake">Snake</option> 
     <option value="lion">Lion</option> 
     <option value="raven">Raven</option> 
     <option value="badger">Badger</option> 
    </select> 
    <br> 
    <input type="submit" value="Submit"> 
    <br> 
    <input type="reset" value="Reset"> 
    </fieldset> 
    </form> 
</div> 

Answer 1

К сожалению, вы не можете просто использовать следующее:

If (document.getElementById('red'||'blue'||'green'||'yellow').checked) 

Вы должны разделить каждый идентификатор в к отдельный бит и он получил бы очень многословный. Однако JavaScript (обычно) удивительно гибкий, так что вы можете уменьшить количество кода, чтобы попробовать следующее:

function id_(id) {var r = false; if (document.getElementById(id)) {r = document.getElementById(id);} return r;} 

if (id_('red').checked || id_('blue').checked || id_('green').checked || id_('yellow').checked) {} 

Вы все еще призывающий document.getElementById хотя через прокси-функцию, которая прекрасно, потому что это может помочь сохранить ваш код намного менее подробный. У не изменить название функции от id_ к ид, хотя, как это создаст умопомрачительно ужасный конфликт при использовании id параметров отправляемых функций.

Другие, которые используют Firebug для Firefox или любой из встроенных консолей/инспекторов (Chrome CTRL + SHIFT + J, IE F12 Инструменты разработчика и (настоящая) Opera Dragonfly).

Answer 2

Проверьте, как вы звоните document.getElementById -

По существу, все, что в скобках является входом функции, и если у вас есть операторы в этом входе, те будут оценены первым.

В вашем случае вы поставка:

'red'||'blue'||'green'||'yellow' 

Операторы в этом заявлении предназначены для возврата значения Boolean, т.е. True или False.

'red' - это строка (как и другие), а в Javascript любая строка с длиной больше нуля является «правдивым» значением.

Поскольку эти данные оцениваются перед вводом в getElementById, то на самом деле он снабжен true.

Вы можете представить себе его называют так:

document.getElementById(true) 

И, конечно, у вас нет ни одного элемента с именем «истина».

Ваш первый порт захода будет, то будет структурировать логика по-разному, как то, что вы хотите сравнить, является ли проверяется элемент с ID 'red', или элемент с ID 'blue' проверяется и т.д.

Попробуйте что-то вроде

if (document.getElementById('red').checked || document.getElementById('blue').checked || document.getElementById('green').checked || document.getElementById('yellow').checked) 

Таким образом, вы сравниваете результаты вместо того, чтобы поставлять булево в качестве входных данных

Answer 3

вы не можете использовать getElementById, так как радио-кнопки не Асси gned id s. Вместо этого, поскольку каждому переключателю был назначен тот же name, чтобы указать, что они являются частью одной и той же группы переключателей, вы можете использовать getElementsByName, чтобы найти все из них. Затем проведите через них, чтобы определить, какой из них checked.

function RadioColors() { 
    var selectedColor; 
    var colors = document.getElementsByName('color'); 
    for (var i = 0; i < colors.length; i++) { 
     if (colors[i].checked) { 
      selectedColor = colors[i].value; 
     } 
    } 

    if (selectedColor) 
     window.alert("Radio Selected"); 
    else { 
     window.alert("Radio Not Selected"); 
    } 
} 

Вот jsfiddle для вас, чтобы проверить его в действии.