Question

程序会提示学生一个问题，例如什么是10次6？然后，学生将答案键入文本字段，程序将检查学生的答案是否正确。This is what the code is supposed to produce。这是我的代码：

 <!DOCTYPE html>
 <html lang="en">

 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning to Multiply Website</title>
<style>
    label,
    input {
        width: 120px;
        display: block;
        float: left;
        margin-bottom: 10px;
    }
    label {
        width: 240px;
        text-align: right;
        padding-right: 10px;
        margin-top: 2px;
    }
    br {
        clear: left;
    }
    .button {
        width: 120px;
        background: rgba(144, 255, 246, 0.42);
        color: #0000a0;
        padding: 5px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        margin-left: 250px;
    }

</style>
<script type="text/javascript">
    var num1, num2, res;
    num1 = Math.floor(1+ Math.random() *12); 
    num2 = Math.floor(1+ Math.random() *12);
 document.writeln("<h1>" + num1 + " times " + num2 +" ?</h1>");
 res = num1 * num2;
 document.writeln ("<h1>" + res + " </h1>");

 document.getElementById

 </script>

 </head>

 <body>
  <h1>Learning to Multiply Website</h1>
  <form name="myForm" id="myForm" action="#">
    <label>What is </label>
    <input id="inputVal" name="inputVal" type="text" />
    <br>
    <label>The answer is</label>
    <input name="outputVal" id="outputVal" type="text" />
    <br>
    <input class="button" name="Check My Anwer" type="button" value="Check My    Answer" onclick="Check My Answer" />                                                                         
</form>

And this is what is produces:

有没有人知道如何获得总和进入我创建的'What is'框。它目前位于我创建的表格之上。

Answer 1

尝试这样的事情

document.getElementById('inputVal').value = num1 + ' times ' + num2;

input元素的.value属性包含其值，可以设置为更改其值。

对于非输入元素（例如<div>，<p>），该属性为.innerHTML

在实际网页中，您（几乎）绝不会使用document.write或document.writeln。相反，使用document.getElementById在DOM树中查找现有HTML元素，然后使用.innerHTML设置其内容（或.value表单输入。）

Answer 2

将结果计算到res后，您可以将其放入输入字段，如下所示：

document.getElementById('outputVal').value = res;

但是，现在编写整个代码的方式可能不会起作用。这是因为<script>标记之间的javascript代码在加载所有DOM元素之前执行，包括标识为outputVal的元素。基本上，在达到此行的时间点，页面上没有ID为outputVal的元素。

要检查是否已加载DOM元素，请使用：

document.addEventListener("DOMContentLoaded", function(event) { 
    /*
    your code here
    */
});

一旦加载了所有DOM元素，代码就会执行。

通常，建议将您的Javascript和CSS代码与HTML分开，并在外部加载它们。您可以在单独的.js文件中编写Javascript代码，并将<script src="myscript.js"><script>放入HTML <head>中。

创建一个程序，提示学生总和，如什么是10倍6？

2 个答案: