JavaScript alert onclick onchange if 语句

Question

如果框内填满了世界 "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

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

function sayHello(e) {

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

Answer 3

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

请注意，要使代码不区分大小写，您必须将值转换为小写，然后检查 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 alert onclick onchange if 语句

JavaScript alert onclick onchange if statement

javascript

events

alert

if-statement

onclick