Question

我正在尝试显示一个onclick警告，如果该框填充了世界“hello”，而另一个警告应该弹出“hello”不会输入。不确定我在这里做错了什么：

HTML：

<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
 HELLO
</p>
</form>

JavaScript：

function sayHello() {
var answer = "hello";
if (answer) {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
 }
}

function sayHelloTwo() {
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").style.color = "#909090";
document.getElementById("hidden").style.fontSize = "40px";
}

Answer 1

您需要检查用户在框中输入的实际值，然后将其与您想要的值（answer变量中的值）进行比较。

有几种方法可以做到，其中一种方法是使用

document.getElementById('box').value

（其中box是您元素的id。）

这是一个有效的例子：

function sayHello() {
  var answer = "hello";
  var text = document.getElementById('box').value;
  if (text == answer) {
    alert("Click for Hello!");
  } else {
    alert("you need to type hello!");
    return false;
  }
}

function sayHelloTwo() {
  document.getElementById("hidden").style.display = "block";
  document.getElementById("hidden").style.color = "#909090";
  document.getElementById("hidden").style.fontSize = "40px";
}

<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
 HELLO
</p>
</form>

Answer 2

要详细说明Dekel的回答，click事件还附加了一个事件属性，您可以使用它来获取值，如下所示。

function sayHello(e) {

  if (e.currentTarget.value == "hello") {
    alert("Click for Hello!");
  } else {
    alert("you need to type hello!");
    return false;
  }
}

Answer 3

您可以直接将元素值作为参数this.value传递给html。

请注意，要使代码不区分大小写，必须将值转换为小写，然后检查if语句value.toLowerCase() !== 'hello'

代码：

function sayHello(value) {
  if (value.toLowerCase() !== 'hello') {
    alert('You need to type hello!');
    return false;
  }

  alert('Click for Hello!');
}

function sayHelloTwo() {
  var hidden = document.getElementById('hidden')
  hidden.style.display = 'block';
  hidden.style.color = '#909090';
  hidden.style.fontSize = '40px';
}

<form>
  <input id="box" placeholder="type hello" onchange="sayHello(this.value)" style="display: block;" />
  <input type="button" onclick="sayHelloTwo()" value="Click me" />
  <p id="hidden" style="display: none;">
    HELLO
  </p>
</form>

Answer 4

您在检查答案条件时遇到错误

function sayHello() {
    var answer = "hello";
    if (answer == "hello") {
        alert("Click for Hello!");
    } else {
        alert("you need to type hello!");
        return false;
    }
}

JavaScript警告onclick onchange if语句

4 个答案: