时间戳

首页 > 解决方案 > Javascript if语句问题：网页中没有显示

javascript - Javascript if语句问题：网页中没有显示

问题描述

我对 javascript 有非常基本的了解，我期待在 javascript 中学习一些条件语句。所以我继续在一个名为“index.html”的 HTML 文件中输入了这段代码：

<!DOCTYPE html>
<html>
    <head>
        <title>A sample webpage</title>
    </head>
    <body>
        <script src="script.js"></script>
    </body>
</html>

而来的结果是完全正常的。出现了一个名为“示例网页”的标题。

但是我输入的下一个代码在结果中产生了问题，

var myNumber = window.prompt("Enter number: ");
parseFloat(myNumber);
document.write(myNumber);

结果如预期的那样。

if (myNumber > 15) {
    document.write(<p>Good! You've passed! </p>);
}
else {
    document.write(<p>You failed! Try again next time.</p>);
}

但是当我添加这个根据用户输入给出输出的 if 语句时，我得到一个空白页。我不明白这是什么原因。语法有什么问题吗？

在我看来，它并没有执行我编写的代码的第一部分，它完全想要所有代码。我觉得这很正常，但它不必实际执行“document.write”代码吗？

标签： javascripthtmlsyntax

解决方案

document.write 将字符串作为参数。你将它传递给 HTML。

只是改变

document.write(<p>Good! You've passed! </p>);

至

document.write('<p>Good! You've passed! </p>');

让它工作。更好的方法是添加

<p id="message"></p>

到页面和你有的地方

document.write('<p>Good! You've passed! </p>');

您可以使用

document.getElementById('message').textContent='Good! You've passed!';

document.getElementById("myButton").addEventListener('click', function() { // when clicked
  let myNumber = window.prompt("Enter number: ");
  myNumber = parseFloat(myNumber); // convert to number from string
  document.getElementById('number').textContent = myNumber;
  const msg = document.getElementById('number'); // output container
  if (myNumber > 15) {
    msg.textContent = 'Good! You\'ve passed!' // escaping the quote
  } 
  else {
    msg.textContent = 'You failed! Try again next time.';
  }
});
// above can be written using a so called ternary:
// msg.textContent = myNumber > 15 ? 'Good! You\'ve passed!' : 'You failed! Try again next time.'
<!DOCTYPE html>
<html>

<head>
  <title>A sample webpage</title>
</head>

<body>
  <p id="number"></p>
  <p id="message"></p>
  <button type="button" id="myButton">Did you pass?</button>
  <script src="script.js"></script>
</body>

</html>

推荐阅读