Невозможно определить ответы из ввода текстового поля

Question

Я делаю текстовое приключение, и я хочу получить вход пользователя через текстовое поле. В основном, это все о сокрытии и демонстрации DIV.

Сейчас я пытаюсь сделать что-то основное, например, выбрать пол персонажа.

Итак, в html, я написал вопрос с текстовым полем и кнопкой. Тогда у вас есть все DIV для разных ответов.

<div id="div3" style="display:none;"> 
    <h1>Who are you</h1> 
    <p>Tell us some things about you. Are you a <u>BOY</u> or a <u>GIRL</u> ?</p> 
    <input id="t-dois" type="text" autofocus="autofocus" onkeydown="if (event.keyCode == 13) document.getElementById('b-dois').click()"/> 
    <a id="b-dois" onclick="buttonOne()" style="display: none;"></a> 
</div>  
<div id="div4" style="display:none;"> 
    <div id="div4-1" style="display:none;"> 
     <h1>You're a Boy.</h1> 
     <p></p> 
    </div> 
    <div id="div4-2" style="display:none;"> 
     <h1>You're a Girl.</h1> 
     <p></p> 
    </div> 
    <div id="div4-3" style="display:none;"> 
     <h1>That's not a valid answer.</h1> 
     <p>Answer again.</p> 
     <input id="t-dois" type="text" autofocus="autofocus" onkeydown="if (event.keyCode == 13) document.getElementById('b-dois').click()"/> 
     <a id="b-dois" onclick="buttonOne()" style="display: none;"></a> 
    </div> 

Таким образом, вы в основном типа «BOY» в текстовом поле, и запускает функцию ButtonOne(). Это код, который я написал для него:

function buttonOne() { 
    var input = document.getElementById('t-dois'); 
    if (input === "BOY"){ 
     document.getElementById('div4').style.display = "block"; 
     document.getElementById('div4-1').style.display = "block"; 
     document.getElementById('div4-3').style.display = "none"; 
    } else if (input === "GIRL") { 
     document.getElementById('div4').style.display = "block"; 
     document.getElementById('div4-2').style.display = "block"; 
     document.getElementById('div4-3').style.display = "none"; 
    } else { 
     document.getElementById('div4').style.display = "block"; 
     document.getElementById('div4-3').style.display = "block"; 
    }; 
}; 

Функция не работает должным образом. Он всегда заканчивается последним else, который является недействительным ответом, что заставляет меня думать, что вход не обрабатывается правильно. Не могли бы вы помочь мне или дать мне какие-нибудь советы?

Answer 1

Насколько я понимаю, вы хотите, чтобы отобразить div3 в самом начале, и на основе набранного результата необходимо отобразить либо div4-1, div4-2 или div4-3.
Тогда у вас должно быть div3 и <a>, которое в начале начнется, чтобы начать с чего-то. У вас должен быть текст для <a>Some Text</a>, в противном случае ваш якорь не отобразит ничего, чтобы щелкнуть дальше!

<div id="div3" style="display:block;"> 
    <h1>Who are you</h1> 
    <p>Tell us some things about you. Are you a <u>BOY</u> or a <u>GIRL</u> ?</p> 
    <input id="t-dois" type="text" autofocus="autofocus" onkeydown="if (event.keyCode == 13) document.getElementById('b-dois').click()" /> 
    <a id="b-dois" onclick="buttonOne()" style="display: block;">Submit Answer!</a> 
</div> 

Вы не иметь закрывающий тег для div4, плюс вы не должны использовать тот же Идентификаторы на несколько элементов, в данном случае t-dois & b-dois. (Вы бы использовать более описательные имена, хотя.)

<div id="div4" style="display:none;"> 
    <div id="div4-1" style="display:none;"> 
     <h1>You're a Boy.</h1> 
     <p></p> 
    </div> 
    <div id="div4-2" style="display:none;"> 
     <h1>You're a Girl.</h1> 
     <p></p> 
    </div> 
    <div id="div4-3" style="display:none;"> 
     <h1>That's not a valid answer.</h1> 
     <p>Answer again.</p> 
     <input id="t-dois2" type="text" autofocus="autofocus" onkeydown="if (event.keyCode == 13) document.getElementById('b-dois').click()" /> 
     <a id="b-dois2" onclick="buttonOne()" style="display: none;"></a> 
    </div> 
</div> 

Наконец, вы должны использовать document.getElementById('t-dois').value, чтобы получить введенный текст от входа.

<script type="text/javascript"> 
    function buttonOne() { 
     var input = document.getElementById('t-dois').value; 
     alert(input); 
     if (input === "BOY") { 
      document.getElementById('div4').style.display = "block"; 
      document.getElementById('div4-1').style.display = "block"; 
      document.getElementById('div4-3').style.display = "none"; 
     } else if (input === "GIRL") { 
      document.getElementById('div4').style.display = "block"; 
      document.getElementById('div4-2').style.display = "block"; 
      document.getElementById('div4-3').style.display = "none"; 
     } else { 
      document.getElementById('div4').style.display = "block"; 
      document.getElementById('div4-3').style.display = "block"; 
     }; 

    }; 
</script> 

Если преобразовать введенный текст в нижний регистр (с помощью .toLowerCase()) и сравните «мальчик» и «девочка», все «мальчик» & «девочка» струны с разных случаях будут охвачены.

Answer 2

Вам необходимо установить свою входную переменную, равную значению ('t-dois'). Затем я бы назвал .toLowerCase() на входе и сравнил его с (input === "boy"). Таким образом, пользователь может ввести Boy, BOY, bOy или boy, и все они будут работать.