在 JavaScript 中的输入框而不是 alert() 旁边显示错误
[英]Displaying error next to input box instead of alert() in JavaScript
问题描述
我想在输入框旁边显示错误，而不是使用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>
2 个解决方案
解决方案1
3 已采纳 2019-10-29 03:49:47
所以首先你的查询选择器没有得到输入。 通过执行以下操作，您可以获得输入。
document.querySelector("#number").value= "Invalid negative number"
还要注意.value而不是.innerHTML ，因为输入不会显示它是内部 HTML。 但是这段代码会在输入中显示错误。
要在输入旁边显示错误，只需在输入旁边放一个跨度，给它一个 id 并在错误时调用它。
<span id='displayError'><span>
在你的脚本中
$('displayError').innerHTML = 'Invalid negative number'
解决方案2
1 2019-10-29 03:32:57
你使用了一些 jquery 所以我会在这里使用它：
// get the first span tag.
$("span").html("Invalid input for height");
在Javascript中，如何更改警报窗口以在输入框旁边显示该警报
[英]In Javascript how can I change an alert window to display that alert next to an input box
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.