Displaying error next to input box instead of alert() in JavaScript

Question

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.com/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>&nbsp;</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>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </main>
    <script src="find_primeV2.js"></script>
</body>
</html>

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 an if(input < 0){$("some-id-to-the-error-message").style="display:block;color:red;"}, here a fiddle. — Bagus Tesa
– 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
– Steve Franchise, Commented Oct 29, 2019 at 3:47

Stacxs · Accepted Answer · 2019-10-29 03:49:47Z

3

So 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'

answered Oct 29, 2019 at 3:49

Stacxs

463 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wazz · Accepted Answer · 2019-10-29 03:32:57Z

1

You used some jquery so i'll use it here:

// get the first span tag.
$("span").html("Invalid input for height");

answered Oct 29, 2019 at 3:32

wazz

5,0885 gold badges22 silver badges36 bronze badges

6 Comments

Bagus Tesa Over a year ago

use text() instead of html(), as html() will print unescaped string which may undesirable for some cases.

Steve Franchise Over a year ago

Thank you for the suggestion! I did try $("span").html("Invalid input for height"); but it still does not return the error message :( I tried both text(.) and innerHTML(.) as well - but neither works. Any idea?

wazz Over a year ago

I think I read the code wrong. When you do $("primes").style = "background-color: #ccffff";, is that jquery to target the textarea or is that a variable of some kind?

Steve Franchise Over a year ago

I intended to target a text area actually

wazz Over a year ago

Ok that's what I thought. 2 things: 1 - see @pradipta's answer and 2) in jquery you need to target the ID with a #, and use the css method. So it should be $("#primes").css("background-color", "#ccffff");. Use .style in plain js.

|

Collectives™ on Stack Overflow

Displaying error next to input box instead of alert() in JavaScript

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related