JavaScript - Print Odd & Even numbers preceding number input
Question
I am trying to print all odd & even numbers (in 2 different fields) up to the number entered by the user.
I have everything down to validate the input (ensure it is a positive 2 digit number), and I can print a message if I remove the For loops visible in my code, but when it comes to print all odd & even numbers up to a certain number I am literally stuck for 2 days now.
Could anyone please point me towards direction ? I don't want all the codes, just telling me if I am completely wrong and should use another method would already help me, but at the moment I just can't get anywhere, and I can't find any similar question.
Here is my entire code so far (including my failing attempt to print odd & even numbers):
function myFunction() { var x, message; x = document.getElementById("positiveInteger").value; if (x == "") { alert("Input is empty. Please enter a positive 2 digit number."); } else if (isNaN(x)) { alert("Input is not a number. Please enter a positive 2 digit number."); } else if (x >= 1 && x <= 9) { alert("Input is too low. Please enter a positive 2 digit number."); } else if (x > 99) { alert("Input is too high. Please enter a positive 2 digit number."); } else if (x == 00) { alert("Input is not valid, 00 is not a positive number. Please enter a positive 2 digit number."); } else { for (i = 0; i < x; i + 2) { // This is my attempt to add 2 from 0 (hoping to get all even numbers) to each iteration until we reach the number input. message = document.getElementById("evenNumbers").innerHTML; } for (i = 1; i < x; i + 2) { // This is my attempt to add 2 from 1 (hoping to get all odd numbers) to each iteration until we reach the number input. message = document.getElementById("oddNumbers").innerHTML; } } }
<!DOCTYPE html> <html lang=en> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href=""> <style type="text/css"></style> <meta name="description" content="..." /> <meta name="keywords" content="" /> <title>Q2 - Two Digit Number</title> </head> <script> </script> <body> <h1>Welcome to C1 Assignment 2 - Question 2 !</h1> <p>Please enter a positive 2 digit number:</p> <input type="text" name="integer" id="positiveInteger"> <br><br> <button type="button" name="button" onclick="myFunction()">Submit</button> <br><br> <p id="oddNumbers"></p> <p id="evenNumbers"></p> </body> </html>
1 answers
solution1
2 ACCPTED 2020-01-07 19:36:24
You have the following problems:
You're not assigning to
innerHTML, you're reading from it.You're not incrementing
iduring the loop.i + 2should bei += 2.You need to concatenate all the numbers into the
messagestring before assigning it to theinnerHTMLof the output elements.
function myFunction() { var x, message; x = document.getElementById("positiveInteger").value; if (x == "") { alert("Input is empty. Please enter a positive 2 digit number."); } else if (isNaN(x)) { alert("Input is not a number. Please enter a positive 2 digit number."); } else if (x >= 1 && x <= 9) { alert("Input is too low. Please enter a positive 2 digit number."); } else if (x > 99) { alert("Input is too high. Please enter a positive 2 digit number."); } else if (x == 00) { alert("Input is not valid, 00 is not a positive number. Please enter a positive 2 digit number."); } else { message = ""; for (i = 0; i < x; i += 2) { message += i + " "; } document.getElementById("evenNumbers").innerHTML = message; message = ""; for (i = 1; i < x; i += 2) { message += i + " "; } document.getElementById("oddNumbers").innerHTML = message; } }
<h1>Welcome to C1 Assignment 2 - Question 2 !</h1> <p>Please enter a positive 2 digit number:</p> <input type="text" name="integer" id="positiveInteger"> <br><br> <button type="button" name="button" onclick="myFunction()">Submit</button> <br><br> Odd: <p id="oddNumbers"></p> Even: <p id="evenNumbers"></p>
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.