Input number is odd or even - Message not displaying
Question
I have just started learning Javascript & i cant figure out why this code wont work, the submit button wont display any results. I want to try the task in my way & not in any of the ways listed online as we havent learnt how to do that yet. I think this is a very efficient method which does not include any prompts or alerts.
<: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>
2 answers
solution1
1 ACCPTED 2020-07-04 07:38:54
You need to use .textContent to display the results. You are not displaying any message on your submit click event.
You can read more about .textContent on JS MDN reference
Run snippet below to see in it working.
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>
solution2
1 2020-07-04 07:39:44
Your problem is in document.getElementById('type2')("Entered number is even"); you need to use .textContent
<: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');textContent = "Entered number is even". else document.getElementById('type2');textContent = "Entered number is odd"; } </script> <h2 id="type2"></h2> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.