I'd like to display the error next to the input box instead of using the alert() method. So far, my code does not display anything when I enter a non-qualified number (for example, -10) - my code does not show the error message next to the "Enter Number". When I use the alert() method, it shows up just fine. I suspect that I might have written the querySelector wrong somehow.
How may I fix this?
// $ function is used to replace document.getElementById() in this document for convience
var $ = function(id) { return document.getElementById(id); };
// determine if a number is prime
var isPrime = function( num ) {//step 1.1 add a parameter in function header to accept
// a number passed in
//step 1.2 add a for or while loop to check whether that number is prime or not
// if that number can be divisible by any integer between 2 and (number itself - 1)
// then that number is not a prime, return false
for(var i = 2; i < num; i++)
if(num % i === 0) return false;
return true;
//step 1.3: after loop, return true, indicates that number is a prime
}
// get all prime numbers
var getPrimes = function ( num ){ //step 2.1 add a parameter in function header
var arr = [];
var primes = "";
var count = 0;
//step2.2: add a for or while loop
// inside the loop, call isPrime() function
// inside the loop, add prime number to primes string and update the count
for(var i = 2; i <= num; i++){
if( isPrime(i) ) {
count++;
primes += i.toString() + " "
}
}
arr.push( count );
arr.push( primes );
console.log(arr);
//step 2.3: return an array that holds both primes string and count
return arr;
}
var processEntries = function() {
//get values from page
var input = $("number").value;
input = Number(input);
inputInteger = parseInt(input);
$("primes").value = "";
// add data validation here, to make sure the input is a number greater than 1
if ( isNaN(input) || input!== inputInteger || inputInteger <= 1){
//step 3.1: add js code to display a message says: "Please enter an integer number greater than 1."
//besides the input entry box
document.querySelector("number").innerHTML = "Invalid input for height, enter a non-negative number.";
$("count").value = "";
$("primes").value ="";
$("primes").style = "background-color: #808080";
$("count").style = "background-color: #808080";
}
else {
//step 3.2: add js code to remove error message if having one
$("primes").style = "background-color: #ccffff";
$("count").style = "background-color:#ccffff";
arr = getPrimes( inputInteger );
console.log(inputInteger);
//step 3.3: add js code to call getPrimes() function to display number of primes found in the range
// in the input box with id = "count"
$("count").value = arr[0];
//step 3.4: add js code to call getPrimes() function to display the list of primes found in the textarea
// with id = "primes"
$("primes").value = arr[1];
console.log(arr[1]);
}
}
$("calculate").onclick = processEntries;
$("number").focus();/*@import url();*/
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 800px;
padding: 0 1em .5em;
}
h1 {
color: blue;
margin: .5em 0;
}
#teacher {
float:right;
margin:0px 30px 0px 0px;}
label {
float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
width: 5em;
margin-left: 1em;
margin-bottom: .5em;
}
textarea {
width: auto;
height: auto;
margin-left: 1em;
margin-bottom: .5em;
}
span {
color: red;
font-size: 80%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Future Value Calculator</title>
<link rel="stylesheet" href="prime.css">
</head>
<body>
<main>
<h1>Find Prime Numbers</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" width="177" height="277"/>
<p>Enter any a number to find out how many prime numbers there are
up to and including that value.</p>
<label for="number">Enter Number:</label>
<input type="number" id="number" value="100">
<span> </span><br>
<label for="count">Prime count:</label>
<input id="count" disabled><br>
<label for="primes">Prime numbers:</label>
<textarea id="primes" rows = "10" cols= "40" disabled></textarea><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
<script src="find_primeV2.js"></script>
</body>
</html>I'd like to display the error next to the input box instead of using the alert() method. So far, my code does not display anything when I enter a non-qualified number (for example, -10) - my code does not show the error message next to the "Enter Number". When I use the alert() method, it shows up just fine. I suspect that I might have written the querySelector wrong somehow.
How may I fix this?
// $ function is used to replace document.getElementById() in this document for convience
var $ = function(id) { return document.getElementById(id); };
// determine if a number is prime
var isPrime = function( num ) {//step 1.1 add a parameter in function header to accept
// a number passed in
//step 1.2 add a for or while loop to check whether that number is prime or not
// if that number can be divisible by any integer between 2 and (number itself - 1)
// then that number is not a prime, return false
for(var i = 2; i < num; i++)
if(num % i === 0) return false;
return true;
//step 1.3: after loop, return true, indicates that number is a prime
}
// get all prime numbers
var getPrimes = function ( num ){ //step 2.1 add a parameter in function header
var arr = [];
var primes = "";
var count = 0;
//step2.2: add a for or while loop
// inside the loop, call isPrime() function
// inside the loop, add prime number to primes string and update the count
for(var i = 2; i <= num; i++){
if( isPrime(i) ) {
count++;
primes += i.toString() + " "
}
}
arr.push( count );
arr.push( primes );
console.log(arr);
//step 2.3: return an array that holds both primes string and count
return arr;
}
var processEntries = function() {
//get values from page
var input = $("number").value;
input = Number(input);
inputInteger = parseInt(input);
$("primes").value = "";
// add data validation here, to make sure the input is a number greater than 1
if ( isNaN(input) || input!== inputInteger || inputInteger <= 1){
//step 3.1: add js code to display a message says: "Please enter an integer number greater than 1."
//besides the input entry box
document.querySelector("number").innerHTML = "Invalid input for height, enter a non-negative number.";
$("count").value = "";
$("primes").value ="";
$("primes").style = "background-color: #808080";
$("count").style = "background-color: #808080";
}
else {
//step 3.2: add js code to remove error message if having one
$("primes").style = "background-color: #ccffff";
$("count").style = "background-color:#ccffff";
arr = getPrimes( inputInteger );
console.log(inputInteger);
//step 3.3: add js code to call getPrimes() function to display number of primes found in the range
// in the input box with id = "count"
$("count").value = arr[0];
//step 3.4: add js code to call getPrimes() function to display the list of primes found in the textarea
// with id = "primes"
$("primes").value = arr[1];
console.log(arr[1]);
}
}
$("calculate").onclick = processEntries;
$("number").focus();/*@import url(http://fonts.googleapis./css?family=Wellfleet);*/
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 800px;
padding: 0 1em .5em;
}
h1 {
color: blue;
margin: .5em 0;
}
#teacher {
float:right;
margin:0px 30px 0px 0px;}
label {
float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
width: 5em;
margin-left: 1em;
margin-bottom: .5em;
}
textarea {
width: auto;
height: auto;
margin-left: 1em;
margin-bottom: .5em;
}
span {
color: red;
font-size: 80%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Future Value Calculator</title>
<link rel="stylesheet" href="prime.css">
</head>
<body>
<main>
<h1>Find Prime Numbers</h1>
<img src="images/teacher.png" id="teacher" alt="teacher" width="177" height="277"/>
<p>Enter any a number to find out how many prime numbers there are
up to and including that value.</p>
<label for="number">Enter Number:</label>
<input type="number" id="number" value="100">
<span> </span><br>
<label for="count">Prime count:</label>
<input id="count" disabled><br>
<label for="primes">Prime numbers:</label>
<textarea id="primes" rows = "10" cols= "40" disabled></textarea><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
<script src="find_primeV2.js"></script>
</body>
</html>-
2
So far, my code does not display anything when I enter a non-qualified number (for example, -10) uh, is there any validation at all? like in your
processEntries? like do anif(input < 0){$("some-id-to-the-error-message").style="display:block;color:red;"}, here a fiddle. – Bagus Tesa Commented Oct 29, 2019 at 3:37 -
I think I did include one, the
if ( isNaN(input) || input!== inputInteger || inputInteger <= 1)– Steve Franchise Commented Oct 29, 2019 at 3:47
2 Answers
Reset to default 3So first of all your query selector doesn't get the input. By doing the following you get the input.
document.querySelector("#number").value= "Invalid negative number"
Also notice .value instead of .innerHTML as an input wont show it's inner HTML.
But this code would show the error inside the input.
To show the error next to the input, simply put a span next to the input, give it an id an call it upon error.
<span id='displayError'><span>
and in your script
$('displayError').innerHTML = 'Invalid negative number'
You used some jquery so i'll use it here:
// get the first span tag.
$("span").html("Invalid input for height");