Question

嗯，标题可能有点令人困惑......除非我展示代码，否则很难解释。

在攻击我之前因为我使用的是switch而不是if/else，所以这是一个更大的项目。

因此，当用户在input中输入错误的值时，我希望它显示一条消息I didn't get that, try again。当我输入与switch case元素相对应的值时，我希望该文本消失，我不知道该怎么做。

Jsfiddle，所以你可以比我的书面解释更好地理解它。

html

<input id="input" type="text" placeholder="Say hi, bye or something else.">
<div id="div">
<p id="first"></p>
</div>

<p id="second"></p>

css

 div {
 width: 200px;
 height: 200px;
 margin: auto;
 position: absolute;
 top: 0;
  bottom: 0;
 left: 0;
 right: 0;
 background-color: red;
 opacity: 0;
 transition: 500ms ease;
  }

 input {
 width: 250px; 
    }


 #second {
   margin-top: 225px;
   color: red;
   font-size: 32px;
   font-family: Arial;
     }

javascript

   var first = document.getElementById('first'),
  second = document.getElementById('second'),
  input = document.getElementById('input'),
  div = document.getElementById('div');

  function myFunction(){    
    switch(input.value){
     case 'hi':
     div.style.opacity = '1';
      break;
     case 'bye':
     div.style.opacity= '0';
     break;

     default:
     second.innerHTML = ("I didn't get that, try again.");
      break;
        }
     }

     document.addEventListener('keydown', function(enterKey){
        if(enterKey.keyCode === 13){
        myFunction();
        input.value = '';
           }
        });

这是小提琴的链接。 https://jsfiddle.net/eg3vmk5g/16/

Answer 1

您可以将内容设置为案例部分前面的空字符串。

mProgressDialog = new ProgressDialog(this);

function myFunction() {
    second.innerHTML = "";
    switch (input.value) {
        // ...
    }
}

var first = document.getElementById('first'),
    second = document.getElementById('second'),
    input = document.getElementById('input'),
    div = document.getElementById('div');

function myFunction() {
    second.innerHTML = "";
    switch (input.value) {
        case 'hi':
            div.style.opacity = '1';
            break;
        case 'bye':
            div.style.opacity = '0';
            break;
        default:
            second.innerHTML = "I didn't get that, try again.";
            break;
    }
}

document.addEventListener('keydown', function(enterKey) {
    if (enterKey.keyCode === 13) {
        myFunction();
        input.value = '';
    }
});

div { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: red; opacity: 0; transition: 500ms ease; }
input { width: 250px; }
#second { margin-top: 225px; color: red; font-size: 32px; font-family: Arial; }

Answer 2

您正在向DOM添加内部HTML，但如果文本匹配，则您不会将文本更新为空。

以下是解决方案：

var first = document.getElementById('first'),
second = document.getElementById('second'),
input = document.getElementById('input'),
div = document.getElementById('div');

function myFunction(){    
    switch(input.value){
        case 'hi':
            second.innerHTML = ("");
          div.style.opacity = '1';
        break;
        case 'bye':
            second.innerHTML = ("");
            div.style.opacity= '0';
        break;

        default:
            second.innerHTML = ("I didn't get that, try again.");
        break;
    }
}

document.addEventListener('keydown', function(enterKey){
    if(enterKey.keyCode === 13){
    myFunction();
    input.value = '';
  }
});

当输入值与大小写匹配时，默认开关声明不会使段落消失

2 个答案: