时间戳

首页 > 解决方案 > 在输入框而不是 JavaScript 中的 alert() 旁边显示错误

javascript - 在输入框而不是 JavaScript 中的 alert() 旁边显示错误

问题描述

我想在输入框旁边显示错误而不是使用alert()方法。到目前为止，当我输入非限定数字（例如，-10）时，我的代码没有显示任何内容 - 我的代码没有在"Enter Number". 当我使用该alert()方法时，它显示得很好。我怀疑我可能querySelector以某种方式写错了。

我该如何解决这个问题？

// $ 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>

标签： javascripthtml

解决方案

所以首先你的查询选择器没有得到输入。通过执行以下操作，您可以获得输入。

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

还要注意.value，而不是.innerHTML作为输入不会显示它的内部 HTML。但是这段代码会在输入中显示错误。

要在输入旁边显示错误，只需在输入旁边放一个跨度，给它一个 id 并在错误时调用它。

<span id='displayError'><span>

在你的脚本中

$('displayError').innerHTML = 'Invalid negative number'

推荐阅读