当在文本字段中输入特定字符串时,触发按钮单击以更改div?

时间:2018-01-14 18:45:56

标签: javascript html

我正在做一个简短的问答游戏,我似乎无法弄清楚如何/什么事件监听器适合检测文本框上的特定字符串。这是我到目前为止所做的事情(仅当"否则如果"部分被取出 - 而没有检测到特定的字符串)

HTML:

    <div id="ques1" class="ques">
     <img src="img/img1.png" alt="">

     <div id="btncontainer" class="btncontainer">
      <input id="txtbox" placeholder="Type here"/>
      <button id="go1" class="gobttn"><i>NEXT<i></button>
     </div>
    </div>

    <div id="ques2" class="ques">
     <img src="img/img2.png" alt="">
    </div>

JS:

var s2 = document.getElementById('ques1')
var s3 = document.getElementById('ques2')

var b1 = document.getElementById('landbtn')
var b2 = document.getElementById('go1')

var tbox = document.getElementById('txtbox')

function Quest1To2() {
 s2.style.display = 'none';
 s3.style.display = 'block';
}
b2.addEventListener('click', Quest1To2)

function TxtErr() {
 tbox.style.outline = '0.2em solid red';
}
b2.addEventListener('click', TxtErr)


var a1 = "NEO";  
var answer = txtbox.value

if (answer == a1) {
  Quest1To2();
}

else if () {
  TxtErr();
}

1 个答案:

答案 0 :(得分:0)

input输入时,您可以使用tbox事件来调度事件。

tbox.oninput = function(e) {
  if (e.target.value == a1) {
    Quest1To2();
  }
  else {
    TxtErr();
  }
}