Saya ingin menampilkan kesalahan di sebelah kotak input daripada menggunakan metode alert(). Sejauh ini, kode saya tidak menampilkan apa pun ketika saya memasukkan nomor yang tidak memenuhi syarat (misalnya, -10) - kode saya tidak menampilkan pesan kesalahan di sebelah "Enter Number". Ketika saya menggunakan metode alert(), itu muncul dengan baik. Saya menduga bahwa saya mungkin telah salah menulis querySelector.

Bagaimana cara memperbaikinya?

// $ 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>
3
Steve Franchise 29 Oktober 2019, 06:20

2 jawaban

Jawaban Terbaik

Jadi pertama-tama pemilih kueri Anda tidak mendapatkan input. Dengan melakukan hal berikut, Anda mendapatkan input.

document.querySelector("#number").value= "Invalid negative number"

Perhatikan juga .value alih-alih .innerHTML sebagai input yang tidak akan menunjukkan HTML bagian dalamnya. Tetapi kode ini akan menunjukkan kesalahan di dalam input.

Untuk menampilkan kesalahan di sebelah input, cukup letakkan rentang di sebelah input, berikan id, panggil saat kesalahan.

<span id='displayError'><span>

Dan dalam naskahmu

$('displayError').innerHTML = 'Invalid negative number'
3
Pradipta Reynara 29 Oktober 2019, 03:49

Anda menggunakan beberapa jquery jadi saya akan menggunakannya di sini:

// get the first span tag.
$("span").html("Invalid input for height");
1
wazz 29 Oktober 2019, 03:32