首页 > 解决方案 > 输入数字是奇数或偶数 - 消息不显示

问题描述

我刚开始学习 Javascript,我不知道为什么这段代码不起作用,提交按钮不会显示任何结果。我想以我的方式尝试这项任务,而不是在线列出的任何方式,因为我们还没有学会如何做到这一点。我认为这是一种非常有效的方法,它不包括任何提示或警报。

<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>

 <div align="center">

<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>

</div>

<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">

    <input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number">  <br><br>

    <input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">

<script>

    function myFunction() {
        
        var num=document.getElementById('ooe').value

        if ( num % 2 == 0 )
        document.getElementById('type2')("Entered number is even");
     else
        document.getElementById('type2')("Entered number is odd");
        
        }

</script>
<h2 id="type2"></h2>
</body>

</html>

标签: javascript

解决方案


您需要使用.textContent来显示结果。您没有在提交点击事件中显示任何消息。

你可以阅读更多关于.textContentJS MDN 参考

运行下面的代码片段以查看它的工作原理。

function myFunction() {

  var num = document.getElementById('ooe').value

  if (num % 2 == 0)
    document.getElementById('type2').textContent = "Entered number is even";
  else
    document.getElementById('type2').textContent = "Entered number is odd";

}
h1 {
  font-family: serif;
  font-size: 48px;
  color: #ff00ff;
  text-align: center
}

h2 {
  font-family: sans-serif;
  font-size: 36px;
  color: #0000ff;
  text-align: center
}

h3 {
  font-family: sans-serif;
  font-size: 24px;
  color: #00ffff;
  text-align: center
}
<html>

<head>
  <title>Basic Task 2</title>
</head>

<body>

  <div align="center">

    <h1 id="type1">Checking whether a number is odd or even</h1>
    <h3 id="type3"></h3>

  </div>

  <h2>Enter number</h2>
  <form id="numtype" action="" style="font-size: 24px">

    <input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>

    <input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
 <h2 id="type2"></h2>


推荐阅读