How To Check The Odd And Even Number

Submitted by alpha_luna on Thursday, April 21, 2016 - 16:45.
In this article, we are going to learn on How To Check The Odd And Even Number. This is a simple program that can really help you to determine the given number if it is Odd Number or Even Number using JavaScript. JavaScript we are going to use as our programming language. Also, I added a “Reset” button to clear the Textbox to input another number given of the user. HTML Code This source code where the user types the value to determine if it is Odd or Even Number.
  1. <h2>Odd and Even Number Checker</h2>
  2. <br />
  3. <input type="number" class="text_input" id="data_input" autofocus="autofocus" />
  4. <br />
  5. <br />
  6. <input type="submit" class="btn_control"  value="Check" onclick="check_Even_Odd()" />
  7. <input type="submit" class="btn_control1" value="Clear" onclick="clear_textbox()" />
  8. <br />
  9. <br />
  10. <p id="result" class="text_result"></p>
JavaScript Code This script will help us to determine the value if it is Odd or Even Number.
  1. <script type="text/javascript">
  2. function check_Even_Odd() {
  3.          var input = document.getElementById("data_input").value;
  4. var number = parseInt(input);
  5. if (isNaN(number)) {
  6. alert("Please enter a number.");
  7. document.getElementById("data_input").value="";
  8. document.getElementById("result").innerHTML = "";
  9. document.getElementById("data_input").focus();
  10. }
  11.  
  12. else if (input.length === 0) {
  13. alert("Please enter a valid input");
  14. document.getElementById("data_input").focus();
  15. }
  16. else if (number % 2 == 0 ) {
  17. document.getElementById("result").innerHTML = number + " <b style='color:blue; font-size:18px;'> is even number.</b>";
  18. }
  19. else {
  20.          document.getElementById("result").innerHTML = number + " <b style='color:blue; font-size:18px;'> is odd number.</b>";
  21.  }
  22. }
  23. function clear_textbox(){
  24.  document.getElementById("result").innerHTML = "";
  25.  document.getElementById("data_input").value="";
  26.  document.getElementById("data_input").focus();
  27. }
  28. </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         font-family:Helvitica;
  4.         color:blue;
  5.         margin:auto;
  6.         width:400px;
  7. }
  8. .text_input {
  9.         font-size:18px;
  10.         text-align:center;
  11.         border:blue 1px solid;
  12.         background:azure;
  13.         width:150px;
  14. }
  15. .btn_control {
  16.         font-size:18px;
  17.         border:blue 1px solid;
  18.         color:blue;
  19.         background:skyblue;
  20.         padding:5px;
  21.         margin-right:20px;
  22.         border-radius:8px;
  23.         cursor:pointer;
  24. }
  25. .btn_control1 {
  26.         font-size:18px;
  27.         border:blue 1px solid;
  28.         color:blue;
  29.         background:white;
  30.         border-radius:8px;
  31.         padding:5px;
  32.         cursor:pointer;
  33. }
  34. .text_result {
  35.         font-size:18px;
  36.         width:300px;
  37.         padding:40px;
  38.         color:red;
  39.         border:blue 1px solid;
  40.         background:white;
  41.         text-align:center;
  42. }
  43. </style>
Output: If the value is Even Number. Even Number If the value is Odd Number. Odd Number Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Check whether a number is odd or even
even or odd
Odd Even numbers

Add new comment

About text formats
  • 87 views