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>

所以你基本上输入＆＃39; BOY＆＃39;在文本字段中，它运行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的结束标记，而且您不应该在多个元素上使用相同的ID，在这种情况下t-dois＆amp; 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

您需要先将输入变量设置为（＆＃39; t-dois＆＃39;）。value。然后，我会在输入上调用.toLowerCase（）并将其与（input ===＆＃34; boy＆＃34;）进行比较。这样，用户可以输入男孩，男孩，男孩或男孩，他们都会工作。

无法从文本字段输入中

2 个答案: