Question

我的if语句未在以下代码中返回正确的响应。我正在尝试使用document.querySelector获取我的消息div的内容，将其存储在secret_saying变量中，并将其与字符串进行比较。但是，即使我的消息div的内容与字符串匹配，显示的响应和图像路径也是不正确的。有什么想法吗？

<div id="message">
An Eagle Flies at Midnight
</div>

<div id="result">
</div>

<img src="">

<script>

var secret_saying = document.querySelector('#message').textContent;
var response = "";
var image_path = "";

if (secret_saying === "An Eagle Flies at Midnight") {
  response = "You may pass";
  image_path = "https://www.craftsmanfounder.com/wp-content/uploads/2014/10/open-door-with-awesome-ideas-and-open-door.jpg.png";
} else {
  response = "Release the hounds!";
  image_path = "http://www.dogbreedplus.com/images/puredogss.png";
}

document.querySelector('#result').textContent = response
document.querySelector('img').src = image_path

</script>

Answer 1

您需要.trim() textContent，因为它内容为空格

＆＃13;

var secret_saying = document.querySelector('#message').textContent.trim();
var response = "";
var image_path = "";
if (secret_saying === "An Eagle Flies at Midnight") {
  response = "You may pass";
  image_path = "https://www.craftsmanfounder.com/wp-content/uploads/2014/10/open-door-with-awesome-ideas-and-open-door.jpg.png";
} else {
  response = "Release the hounds!";
  image_path = "http://www.dogbreedplus.com/images/puredogss.png";
}

document.querySelector('#result').textContent = response
document.querySelector('img').src = image_path

＆＃13;

<div id="message">
An Eagle Flies at Midnight
</div>

<div id="result">
</div>

<img src="">

＆＃13;

Answer 2

#message div中有额外的空格。你应该自己修剪一下：

<div id="message">An Eagle Flies at Midnight</div>

或在你的JS代码中修剪它：

var secret_saying = document.querySelector('#message').textContent.trim();

Answer 3

您也可以使用Regex表达式来验证输入。以下是一些有关正则表达式帮助的参考资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

var secret_saying = "An Eagle Flies at Midnight";
console.log(/^An Eagle Flies at Midnight$/.test(secret_saying)); //true

小提琴：https://jsfiddle.net/79yxz55k/2/

在JS中将div的内容与字符串进行比较

3 个答案: