Javascript 在新窗口中打开结果n_Javascript_Html_Var_Window.open

Javascript 在新窗口中打开结果n

javascript html

Javascript 在新窗口中打开结果n,javascript,html,var,window.open,Javascript,Html,Var,Window.open,我知道我需要为我的代码添加一个window.open，但我的问题是我不确定它需要在哪里正常工作。我想做的是当你点击check时打开一个新窗口。此窗口将显示结果。多谢各位 <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Math Worksheet&l

我知道我需要为我的代码添加一个window.open，但我的问题是我不确定它需要在哪里正常工作。我想做的是当你点击check时打开一个新窗口。此窗口将显示结果。多谢各位

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Math Worksheet</title>



<link href="styles.css" rel="stylesheet" type="text/css">
<script>
var variable = new Array();
var correct=0;

function setupEvents() {               // Loads page
    makeProblems();
}

function makeProblems() {               // Creates variables for problems

    var tempText;

    for ( i=0; i < 20; i++) {
        variable[i] = Math.floor(Math.random() * 50) + 1;
        tempText = variable[i];
        i++;
        document.getElementById('var' + i).innerHTML = tempText;
        i--;
    }   
}

function checkAnswers() {               // checks the answers

    var answer;
    var sum;
    var number1;
    var number2;
    var j=0;
    var img=0;

    for ( i=1; i <= 10; i++) {                            
        answer = document.getElementById('answer' + i).value;
        if ( checkInput(answer, i) == false ) {                     //Error-checking
            return false;   
        }
            number1 = variable[j];
            j++
            number2 = variable[j];
            sum = number1 + number2;
            j++;
            if ( answer == sum ) {
                document.images[img].src = "img/correct.gif";
                correct++;
            } else {
                document.images[img].src = "img/wrong.gif";
            }
        //}
        img++;
    }
    disableButton();
    giveResults();
}

function checkInput(answer, i){
    if( isNaN(answer) || answer == "" ) {                                           // makes sure that the input is a number
        for (j=0; j < 10; j++) {
            document.images[j].src = "img/hide.png";                                // image used to swap between corret and wrong images
        }
        window.alert("Please enter a number.");     
        document.getElementById('answer' + i).value = "";
        document.getElementById('answer' + i).focus();
        correct=0;
        return false;
    } else {
        document.getElementById('answer' + i).setAttribute("class", "");
    }
}

function disableButton() {
    document.getElementById('buttons').innerHTML = "<input type='button' value=' More! ' onclick='moreProblems()' id='more' class='right' /><input type='button' value=' Check! ' onclick='checkAnswers()' id='check' class='right' disabled='disabled'/>";
}

function giveResults() {    
            // gives number of correct answers
    if ( correct == 10 ) {
        document.getElementById('correct').innerHTML = correct + " out of 10!<br />Way to Go! You are great at Math!";

    } else {
        document.getElementById('correct').innerHTML = correct + " out of 10!<br />Nice try!  Let's give it another shot!  I know you can do it!";

    }
}

function moreProblems() {                   // reloads the page
    window.document.location = "math.html";
}

window.onload = setupEvents;
</script>


</head>

<body>
<div id="container">
    <div id="header">&nbsp;</div>
    <div id="header2">&nbsp;</div>
    <div id="worksheet">
        <form action="">
        <div id="main">

            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var1">34</span><br>
                    +<span id="var2">8</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer1" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var3">4</span><br>
                    +<span id="var4">25</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer2" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var5">9</span><br>
                    +<span id="var6">26</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer3" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var7">28</span><br>
                    +<span id="var8">4</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer4" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var9">32</span><br>
                    +<span id="var10">24</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer5" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var11">46</span><br>
                    +<span id="var12">17</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer6" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var13">3</span><br>
                    +<span id="var14">48</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer7" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var15">43</span><br>
                    +<span id="var16">50</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="" id="answer8" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var17">9</span><br>
                    +<span id="var18">44</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer9" value="" class="">
            </div>
            <div class="problem">
            <input class="carryOver" type="text" size="1" maxlength="1">
            <img src="img/hide.png" alt="">
                <p class="variables">
                    <span id="var19">18</span><br>
                    +<span id="var20">43</span>
                </p>
                <div class="line">&nbsp;</div>
                <hr>
                <input type="text" size="3" maxlength="3" id="answer10" value="" class="">
            </div>
        </div>
        <div id="footer">
            <div class="left">Correct:&nbsp;<span id="correct">&nbsp;</span></div>
            <div id="buttons" class="right buttons">
                <input type="button" value=" More! " onclick="moreProblems()" id="more" class="right">
                <input type="button" value=" Check! " onclick="checkAnswers()" id="check" class="right">

            </div>
        </div>
        </form>
    </div>



  <p></p>

</div>


</html>


数学工作表
var变量=新数组（）；
var=0；
函数setupEvents（）{//加载页面
制造问题（）；
}
函数makeProblems（）{//为问题创建变量
var-tentext；
对于（i=0；i<20；i++）{
变量[i]=Math.floor（Math.random（）*50）+1；
TENTEXT=变量[i]；
i++；
document.getElementById（'var'+i）.innerHTML=testext；
我--；
}   
}
函数checkAnswers（）{//检查答案
var回答；
var和；
变量1；
var数2；
var j=0；
var-img=0；
对于（i=1；i我假设新窗口中需要的结果是giveResults
所描述的结果
您可以重写函数以打开要显示的内容的数据URI
function giveResults() { // gives number of correct answers
    if (correct == 10) {
        window.open('data:text/plain,' + encodeURIComponent(correct + " out of 10!\r\nWay to Go! You are great at Math!"));
    } else {
        window.open('data:text/plain,' + encodeURIComponent(correct + " out of 10!\r\nNice try!  Let's give it another shot!  I know you can do it!"));
    }
}

糟糕的是，我实际上正在尝试运行[checkAnswers]函数来获得一个新窗口。使用相同的方法，您可以生成一个HTML页面：）