我想在输入框旁边显示错误，而不是使用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> </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>因此，首先查询选择器不会获得输入。通过执行以下操作，您将获得输入。
document.querySelector("#number").value= "Invalid negative number"
还请注意，.value而不是.innerHTML作为输入不会显示其内部HTML。但是此代码将显示输入内部的错误。
要在输入旁边显示错误，只需在输入旁边放一个跨度，给它一个id即可在出错时调用它。
<span id='displayError'><span>
并在您的脚本中
$('displayError').innerHTML = 'Invalid negative number'
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句