Fatal编程技术网
  • javascript/
  • Javascript 将警报更改为打印输出

Javascript 将警报更改为打印输出

javascript

Javascript 将警报更改为打印输出,javascript,Javascript,我仍然在搞乱这个用JavaScript编写的计算器。我问的问题是如何使其停止显示输出警报，并将其打印到下面名为“output”的div标记中 我已经在输出中放入了我认为应该是的内容，并将其粘贴到下面： <html> <head> <link href="stylesheet/stylesheet.css" rel="stylesheet" type="text/css"> <script type="text/javascri

我仍然在搞乱这个用JavaScript编写的计算器。我问的问题是如何使其停止显示输出警报，并将其打印到下面名为“output”的div标记中

我已经在输出中放入了我认为应该是的内容，并将其粘贴到下面：

 <html>
    <head>
    <link href="stylesheet/stylesheet.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">



    function checkinputs(){
    var     A = parseInt(document.triangleform.input1.value);
    var     B = parseInt(document.triangleform.input2.value);
    var     C = parseInt(document.triangleform.input3.value);


        if (A == B && B == C) { alert("Equalateral"); } 
        if (A == B && B != C || B == C && A != B || C == A && A != B) {alert("Isosceles");} 
        if (A != B && B != C && C != A) {alert("Scalene!");} 
    }



    function keypress(evt) {
      var theEvent = evt || window.event;
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode( key );
        var regex = /[0-9]|\./;
      if( !regex.test(key) ) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
      }
    }

    function notEmpty(field, NocharMsg){
        if(field.value.length == 0){
            alert(NocharMsg);
            field.focus();
            return false;
        }
        return true;
    }
    </script


    </head>
    <body>
    <div id="Container">

    <div id="Header"><h1></h1></div>

            <div id="Content_1">
                    <div id="Explanation">
                    This calculator will determine what
                    triangle you have made depending on
                    the integer values in the input fields.

                    </div>
                    <div id="Form">
                        <FORM NAME="triangleform">
                        Enter the triangle values below: <br>
                        <p>
                        <h4>Side 1: </h4><BR>
                        <INPUT TYPE="Integer" NAME="input1" onkeypress='keypress(event)' /><P>
                        <h4>Side 2: </h4><BR>
                        <INPUT TYPE="Integer" NAME="input2" onkeypress='keypress(event)' /><P>
                        <h4>Side 3:</h4> <BR>
                        <INPUT TYPE="Integer" NAME="input3" onkeypress='keypress(event)' /><P>
                        <INPUT TYPE="button" NAME="Submit" Value="Submit" onClick="checkinputs()" />
                        </FORM>
                    </div>
                    <div id="Verbal_Output">
                        <h2>You made a:</h2>
                        <p>        
                        <h2>Triangle</h2>
                    </div>

                </div>
                <p>
                <p>
            <div id="Content_2">

            <div id="Output">
            <script>
            document.getElementById("Output").value = checkinputs();

            </script>   
            </div>



    </body>
    </html>


函数checkinputs（）{
var A=parseInt（document.triangleform.input1.value）；
var B=parseInt（document.triangleform.input2.value）；
var C=parseInt（document.triangleform.input3.value）；
如果（A==B&&B==C）{alert（“Equalateral”）；}
如果（A==B&&B！=C | | B==C&&A！=B | | C==A&&A！=B）{alert（“等腰”）}
如果（A！=B&&B！=C&&C！=A）{alert（“Scalene！”）；}
}
功能按键（evt）{
var theEvent=evt | | window.event；
var key=theEvent.keyCode | | theEvent.which；
key=String.fromCharCode（key）；
var regex=/[0-9]\./；
如果（！正则表达式测试（键））{
theEvent.returnValue=false；
如果（theEvent.preventDefault）theEvent.preventDefault（）；
}
}
函数notEmpty（字段，NocharMsg）{
如果（field.value.length==0）{
警报（NocharMsg）；
field.focus（）；
返回false；
}
返回true；
}

差不多了-div没有
值
属性（用于表单输入），但它有
innerHTML
属性。只需确保
从
checkInputs（）
返回所需的值，而不是
alert

例如：


function checkinputs() {
    var A = parseInt(document.triangleform.input1.value),
        B = parseInt(document.triangleform.input2.value),
        C = parseInt(document.triangleform.input3.value),
        result;


    if (A == B && B == C) { result = "Equilateral"; } 
    if (A == B && B != C || B == C && A != B || C == A && A != B) { result ="Isosceles";} 
    if (A != B && B != C && C != A) { result = "Scalene!";} 

    // return result;
    document.getElementById("Output").innerHTML = result;
}


然后在标记中：


<script>
        document.getElementById("Output").innerHTML = checkinputs();
</script>




document.getElementById（“输出”）.innerHTML=checkinputs（）；


请注意，
.innerHTML
区分大小写。
函数checkinputs（）{

function checkinputs(){  
    var A = parseInt(document.triangleform.input1.value);
    var B = parseInt(document.triangleform.input2.value);
    var C = parseInt(document.triangleform.input3.value);

    if (A == B && B == C) { $('#output').html("<div>Equalateral</div>");}
    if (A == B && B != C || B == C && A != B || C == A && A != B) {$('#output').html("<div>Isosceles</div>");}
    if (A != B && B != C && C != A) {$('#output').html("<div>Scalene!</div>");}
}  


var A=parseInt（document.triangleform.input1.value）；
var B=parseInt（document.triangleform.input2.value）；
var C=parseInt（document.triangleform.input3.value）；
如果（A==B&&B==C）{$（'#output'）.html（“Equalateral”）}
如果（A==B&&B！=C | | B==C&&A！=B | | C==A&&A！=B）{$（'#输出'）.html（“等腰”）；}
如果（A！=B&&B！=C&&C！=A）{$（'output'）.html（“Scalene！”）}
}  

因此，如果（A！=B&&B！=C&&C！=A）{return；}，它将是
而不是
{alert（“Name”）}
，
document.getElementById（“Image_Output”）。innerhtml=checkinputs（）；
添加了一个示例，希望对您有所帮助。谢谢Chris，我刚刚将函数改为yours（自己重新编写以学习），并将div改为：
document.getElementById（“Image_Output”）.innerhtml=checkinputs（）；
还是没有变化？还是我遗漏了什么？是否为检查输入（返回）；啊，好吧，现在你进入了比赛状态函数在页面加载时运行一次，因此表单输入中没有值，因此不会发生任何事情。你可以在表单提交按钮上的点击/提交处理程序中触发
innerHTML
设置，就像上面Rahul的例子一样。现在完全疯了哈哈，那么我可以将此代码与Rahuls结合使用吗？这会起作用，但如果你能解释原因，会更有帮助。嘿，Rahul，谢谢你的回复。如果可以的话，我希望得到一个解释：）另外，这里没有jQuery要求。这里没有使用jQuery的特殊需要，它也可以用纯javascript完成，使用它的原因是对原始代码进行最小的更改。与使用返回调用相比，我更喜欢在函数本身进行更改。代码看起来简单而简单，但如果这是一个更大更复杂的代码，我建议使用Jquery使事情更简单。