JavaScript中的Alert()循环
我对JS非常陌生,但现在我正在尝试创建一个表单验证方法,该方法不断检查所有条目是否不等于JavaScript中的Alert()循环,javascript,jquery,html,alert,Javascript,Jquery,Html,Alert,我对JS非常陌生,但现在我正在尝试创建一个表单验证方法,该方法不断检查所有条目是否不等于NaN或NULL(我将其描述为“”)。但是,我认为我错误地使用了“alert()”函数,它没有停止检查足够长的时间,以便有人重新输入信息 我的逻辑是保留在“checkblanks”函数中,同时返回一个布尔值“false”,但我的警报消息不会停止在屏幕上显示 然后,当我通过Firefox强制“停止”警报,并填写x1、x2、x3字段时,它会两次打印出操作函数 我的JS //Direction Toggle
NaN
或NULL(我将其描述为“”)。但是,我认为我错误地使用了“alert()
”函数,它没有停止检查足够长的时间,以便有人重新输入信息
我的逻辑是保留在“checkblanks”函数中,同时返回一个布尔值“false”,但我的警报消息不会停止在屏幕上显示
然后,当我通过Firefox强制“停止”警报,并填写x1、x2、x3字段时,它会两次打印出
操作
函数
我的JS
//Direction Toggle
$("p, #answer").hide();
$("h1").click(function () {
$(this).next().slideToggle(300);
});
function testResults(form) {
//Form validation
while (checkblanks(form) == false) {
alert("Please fill in all numeric values");
checkblanks(form);
}
function checkblanks(pform1) {
var display = "";
if (pform1.x1.value == "" || pform1.x1.value == NaN) {
display += "x1, ";
}
if (pform1.x2.value == "" || pform1.x2.value == NaN) {
display += "x2, ";
}
if (pform1.x3.value == "" || pform1.x3.value == NaN) {
display += "x3";
}
if (display != "") {
return false;
} else {
return true;
}
}
//Complete operations if you're all set!
operations(form);
function operations(form) {
//JQuery Answer Show
$(".button").click(function () { //after form submission
$(".matrix").slideUp(1000, function () { //hiding the matrix form
$("#answer").slideDown(1000); //and display the answer
});
});
//System Class Local to operations function
function system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3) {
this.x1 = x1;
this.x2 = x2;
this.x3 = x3;
this.y1 = y1;
this.y2 = y2;
this.y3 = y3;
this.z1 = z1;
this.z2 = z2;
this.z3 = z3;
this.a1 = a1;
this.a2 = a2;
this.a3 = a3;
this.calcDanswer = function () {
return (this.x1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * D.y3) - (this.y2 * this.x3)));
};
this.calcXanswer = function () {
return (this.a1 * ((this.y2 * this.z3) - (this.z2 * this.y3))) - (this.y1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) + (this.z1 * ((this.a2 * this.y3) - (this.y2 * this.a3)));
};
this.calcYanswer = function () {
return (this.x1 * ((this.a2 * this.z3) - (this.z2 * this.a3))) - (this.a1 * ((this.x2 * this.z3) - (this.z2 * this.x3))) + (this.z1 * ((this.x2 * this.a3) - (this.a2 * this.x3)));
};
this.calcZanswer = function () {
return (this.x1 * ((this.y2 * this.a3) - (this.a2 * this.y3))) - (this.y1 * ((this.x2 * this.a3) - (this.a2 * this.x3))) + (this.a1 * ((this.x2 * this.y3) - (this.y2 * this.x3)));
};
}
//Assign x1-a3
var x1 = form.x1.value;
var x2 = form.x2.value;
var x3 = form.x3.value;
var y1 = form.y1.value;
var y2 = form.y2.value;
var y3 = form.y3.value;
var z1 = form.z1.value;
var z2 = form.z2.value;
var z3 = form.z3.value;
var a1 = form.a1.value;
var a2 = form.a2.value;
var a3 = form.a3.value;
//Pass to constructor and calculate
var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
var X = D.calcXanswer() / D.calcDanswer();
var Y = D.calcYanswer() / D.calcDanswer();
var Z = D.calcZanswer() / D.calcDanswer();
// printing to console
var out = document.getElementById('real-answer');
out.innerHTML += "<b>The equations you entered were:</b>" + "<br />" + D.x1 + "x + " + D.y1 + "y + " + D.z1 + "z = " + D.a1 + "<br />" + D.x2 + "x + " + D.y2 + "y + " + D.z2 + "z = " + D.a2 + "<br />" + D.x3 + "x + " + D.y3 + "y + " + D.z3 + "z = " + D.a3 + "<br /><br />" +
"The answer for <b>D</b> is " + D.calcDanswer() + "<br />" +
"The answer for <b>Dx</b> is " + D.calcXanswer() + "<br />" +
"The answer for <b>Dy</b> is " + D.calcYanswer() + "<br />" +
"The answer for <b>Dz</b> is " + D.calcZanswer() + "<br />" +
"<b>X</b> is " + X + "<br />" +
"<b>Y</b> is " + Y + "<br />" +
"<b>Z</b> is " + Z + "<br />" + "<br />";
}
}
//方向切换
$(“p,#答案”).hide();
$(“h1”)。单击(函数(){
$(this.next().slideToggle(300);
});
函数测试结果(表格){
//表单验证
while(勾选空格(形式)==false){
警告(“请填写所有数值”);
检查空格(表格);
}
功能检查空白(pform1){
var display=“”;
if(pform1.x1.value==“”| | pform1.x1.value==NaN){
显示+=“x1”;
}
if(pform1.x2.value==“”| | pform1.x2.value==NaN){
显示+=“x2”;
}
if(pform1.x3.value==“”| | pform1.x3.value==NaN){
显示+=“x3”;
}
如果(显示!=“”){
返回false;
}否则{
返回true;
}
}
//如果一切就绪,请完成操作!
操作(表格);
函数操作(表格){
//JQuery问答节目
$(“.button”)。提交表单后单击(函数(){//
$(“.matrix”).slideUp(1000,函数(){//隐藏矩阵形式
$(“#答案”)。向下滑动(1000);//并显示答案
});
});
//本地操作函数的系统类
功能系统(x1、x2、x3、y1、y2、y3、z1、z2、z3、a1、a2、a3){
这是1.x1=x1;
这是0.x2=x2;
这1.x3=x3;
这是1.y1=y1;
这1.y2=y2;
这1.y3=y3;
这是1.z1=z1;
这1.z2=z2;
这1.z3=z3;
这1.a1=a1;
这1.a2=a2;
这1.a3=a3;
this.calcDanswer=函数(){
返回(this.x1*((this.y2*this.z3)-(this.z2*this.y3))-(this.y1*((this.x2*this.z3)-(this.z2*this.x3))+(this.z1*((this.x2*D.y3)-(this.y2*this.x3));
};
this.calcXanswer=函数(){
返回(this.a1*((this.y2*this.z3)-(this.z2*this.y3))-(this.y1*((this.a2*this.z3)-(this.z2*this.a3))+(this.z1*((this.a2*this.y3)-(this.y2*this.a3));
};
this.calcYanswer=函数(){
返回(this.x1*((this.a2*this.z3)-(this.z2*this.a3))-(this.a1*((this.x2*this.z3)-(this.z2*this.x3))+(this.z1*((this.x2*this.a3)-(this.a2*this.x3));
};
this.calcZanswer=函数(){
返回(this.x1*((this.y2*this.a3)-(this.a2*this.y3))-(this.y1*((this.x2*this.a3)-(this.a2*this.x3))+(this.a1*((this.x2*this.y3)-(this.y2*this.x3));
};
}
//分配x1-a3
var x1=形式x1.值;
var x2=形式x2.值;
var x3=form.x3.value;
变量y1=形式y1.值;
var y2=form.y2.value;
var y3=形式y3.价值;
var z1=形式z1.值;
var z2=形式z2.值;
var z3=形式z3.值;
var a1=形式a1.值;
var a2=形式a2.值;
var a3=表a3.值;
//传递给构造函数并计算
var D=新系统(x1、x2、x3、y1、y2、y3、z1、z2、z3、a1、a2、a3);
var X=D.calcXanswer()/D.calcDanswer();
变量Y=D.calcYanswer()/D.calcDanswer();
var Z=D.calcZanswer()/D.calcDanswer();
//打印到控制台
var out=document.getElementById('real-answer');
out.innerHTML+=”您输入的方程式是:“+”
“+D.x1+“x+”+D.y1+“y+”+D.z1+“z=“+D.a1+”
“+D.x2+”x+“+D.y2+”y+“+D.z2+”z=“+D.a2+”
“+D.x3+”y+“+D.z3+”z=“+D.a3+”
”+
D的答案是“+D.calcDanswer()+”
+
Dx的答案是“+D.calcXanswer()+”
+
Dy的答案是“+D.calcYanswer()+”
”+
Dz的答案是“+D.calcZanswer()+”
”+
“X是”+X+“
”+
“Y是”+Y+“
”+
“Z是”+Z+”
“+”
“;
}
}
我的HTML
<body>
<!--DIRECTIONS & FORM-->
<div class="matrix">
<h1><span id="highlight">How Does This Work?</span></h1>
<p>Type in all the information for your system of three equations.
<br />When finished, hit "Go".</p>
<!--Form-->
<FORM NAME="myform" id="form" ACTION="" METHOD="GET">
<input type="text" name="x1" />x +
<input type="text" name="y1" />y +
<input type="text" name="z1" />z =
<input type="text" name="a1" />
<br />
<input type="text" name="x2" />x +
<input type="text" name="y2" />y +
<input type="text" name="z2" />z =
<input type="text" name="a2" />
<br />
<input type="text" name="x3" />x +
<input type="text" name="y3" />y +
<input type="text" name="z3" />z =
<input type="text" name="a3" />
<br />
<input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)" />
</FORM>
<!--....................................-->
</div>
<!--ANSWER-->
<div id="answer">
<h1><span id="highlight">The Answer:</span></h1>
<div id='real-answer'></div>
</div>
</body>
这是怎么回事?
输入三方程组的所有信息。
完成后,点击“开始”
x+
y+
z=
x+
y+
z=
x+
y+
z=
答案是:
不幸的是,我创建的JSFIDLE没有显示我的浏览器显示网页的方式,但这是我的代码:
问题已解决。
问题已解决。将while循环改为警告错误消息并返回false:
if(checkblanks(form) === false) {
alert("Please fill in all numeric values");
return false;
}
毕竟,您不能继续,用户应该在更正错误后再次使用submit/go按钮。另外,在JavaScript中,不断地检查并不是一种方法,相反,您会监听事件,例如表单值更改,并对其作出反应
重复答案问题
操作中的第一个操作是将事件侦听器添加到提交按钮:
function operations(form) {
$(".button").click(function () { //after form submission
$(".matrix").slideUp(1000, function () { //hiding the matrix form
$("#answer").slideDown(1000); //and display the answer
});
});
您这样做是为了隐藏.matrix
,并且为了显示答案,,只要在此之后按下按钮。然而,这不是你真正想要做的。相反,您希望隐藏.matrix
并显示#答案function operations(form) {
$(".button").click(function () { //after form submission
$(".matrix").slideUp(1000, function () { //hiding the matrix form
$("#answer").slideDown(1000); //and display the answer
});
});
function operations(form) {
$(".matrix").slideUp(1000, function () { //hiding the matrix form
$("#answer").slideDown(1000); //and display the answer
});
// ...
$('input').on('submit',function(){
checkblanks(form);
});