javascript - 如何使用 onchange 函数显示当前的单选值以在不同的 HTML 页面上反射(reflect)正确的结果?

标签 javascript html

你能帮我吗?我想做一个准确性测验,点击提交后 它将得到您的答案以及您完成测验所需的时间(以秒为单位),并将其与函数中的数据数组进行比较,并将其显示在不同的 HTML 页面上。

我使用 onchange="handleInput(this);" 和 <form action="Results.html"> 在不同页面上显示结果。我是 JavaScript 新手。

任何帮助将不胜感激!谢谢。

结果显示示例

Oops! You got 3 answers wrong!

Incorrect answers: 2, 4, 5

You took 17 seconds to complete the quiz. With 5 answers wrong that equates to 65 errors per hour! Data Accuracy Answer Key

There are two exact matches: 1 and 3. All others are not a match. Please keep in mind that 90 seconds is the average time it takes to finish the quiz.

这是迄今为止我的代码:

<html>
<title>Accuracy Proofing</title>
<head>
<script language="JavaScript">
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() { 
var myTime = new Date(); 
var timeNow = myTime.getTime();  
var timeDiff = timeNow - clockStart; 
this.diffSecs = timeDiff/1000; 
return(this.diffSecs); 
} 
var secStop=setInterval(function(){getSecs()},1000);
function getSecs() { 
var mySecs = initStopwatch(); 
var mySecs1 = ""+mySecs;
mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " secs."; 
document.forms[0].elapsed_time.value = mySecs1;
document.getElementById('Timer').innerHTML = 'Elapsed time: ' + mySecs1;
document.getElementById("demo").innerHTML=initStopwatch;
window.setTimeout('getSecs()',1000); 
}
</script>

</head>

<body class="quiz-container" onLoad="window.setTimeout('getSecs()',1)">
<div class="quiz-container-inner"
        <h3>Accuracy Quiz</h3>
        <p class="overview">Compare each pair below. If the numbers, letters, and punctuation are the same, put a check in the "Same" column. If they are different, put a check in the "Different" column.</p>


        <div class="box-callout">
        <form action="Results.html" method="post" class="products" target="_top">
            <input type="hidden" name="elapsed_time" id="elapsed_time" value="0">
        <!-- Table markup-->

        <div id="Timer" name="Timer"></div>

        <table id="hor-zebra" summary="Employee Pay Sheet">

        <!-- Table header -->
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Correct</th>
                <th scope="col">Same</th>
                <th scope="col">Different</th>
                <th scope="col"></th>
                <th scope="col">Copy</th>
            </tr>
        </thead>
        <!-- Table footer -->
        <tfoot>
            <tr>
            <td scope="col"></td>
            <td scope="col">Correct</td>
            <td scope="col">Same</td>
            <td scope="col">Different</td>
            <td scope="col"></td>
            <td scope="col">Copy</td>
            </tr>
        </tfoot>


        <!-- Table body -->
        <tbody>
            <tr class="odd">
                <td><span class="number">1.</span></td>
                <td><span class="times">November 16, 2005</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field1" id="Field1_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field1" id="Field1_2">               
                </td>
                <td><span class="number">1.</span></td>
                <td><span class="courier">Novenber 16, 2005</span></td>
            </tr>
            <tr>
                <td><span class="number">2.</span></td>
                <td><span class="times">CITIMORTGAGE, INC.</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field2" id="Field2_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field2" id="Field2_2">               
                </td>
                <td><span class="number">2.</span></td>
                <td><span class="times-tight">CITIMORGAGE, INC.</span></td>
            </tr>
            <tr class="odd">
                <td><span class="number">3.</span></td>
                <td><span class="times">ALICIA CARILLO</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field3" id="Field3_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field3" id="Field3_2">               
                </td>
                <td><span class="number">3.</span></td>
                <td><span class="times">Alcia Carillo</span></td>
            </tr>
            <tr>
                <td><span class="number">4.</span></td>
                <td><span class="times">45 Nortwesterly</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field4" id="Field4_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field4" id="Field4_2">               
                </td>
                <td><span class="number">4.</span></td>
                <td><span class="arial">45 Nortwesterley</span></td>
            </tr>
            <tr class="odd">
                <td><span class="number">5.</span></td>
                <td><span class="times">HUSBAND AND WIFE</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field5" id="Field5_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field5" id="Field5_2">               
                </td>
                <td><span class="number">5.</span></td>
                <td><span class="times">HUSBAND AND WIFE</span></td>
            </tr>
            <tr>
                <td><span class="number">6.</span></td>
                <td><span class="times">AMERICAHOMEKEY, INC.</span></td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field6" id="Field6_1">
                </td>
                <td>
                    <input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field6" id="Field6_2">               
                </td>
                <td><span class="number">6.</span></td>
                <td><span class="arial">AMERICAHOMKEY, INC.</span></td>
            </tr>
        </tbody>

        </table>

    <div class="pad">
<input type="Submit" value="Show Me the Results." class="large brown awesome">
        </div>
    </form>
    </div>
</div>
<script type="text/javascript">
    createTimer();
</script>

</body>
</html>

我的网站位于本地,它没有托管到任何网络服务器,我只想让它在本地运行。这就是为什么我不能使用任何服务器端脚本......

最佳答案

可以使用表单的GET方法代替POST,然后解析url中的参数。 (URL存储在window.location中)

关于javascript - 如何使用 onchange 函数显示当前的单选值以在不同的 HTML 页面上反射(reflect)正确的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14738951/

相关文章:

javascript - 如何禁用 jqGrid 行更改为编辑模式时的自动焦点

javascript - Chrome 中未显示动态加载的 CSS 背景图像

Javascript/HTML - 隐藏 DIV 直到单击按钮

html - 如果第二个 div 为空,如何让 float div 跨越总宽度?

html - 带有垂直文本的多个 div

javascript - 使用 YouTube 视频 ID 访问 YouTube 视频 URL

JavaScript 内存使用管理

javascript - 如何知道计算机使用的语言?

javascript - 如何调整 JavaScript 小部件的大小?

html - Excel VBA HTML 嵌套查询选择器