Question

我想知道我是否离这里太远，我想要一个表格，在这种情况下是一个乘法表，并使用Javascript比较结果并显示它是否正确（我意识到这个代码可能对你们中的一些人来说似乎很怪异，但我是新手，这是一种自我强加的运动。）

HTML：

<html>

<body>

<form id="myForm">

    </h3> 2 * 1 = </h3> <input id="one" type="text" name="1" maxlength="4" size="2"><br>
    </h3> 2 * 2 = </h3> <input id="two" type="text" name="2" maxlength="4" size="2"><br>
    </h3> 2 * 3 = </h3> <input id="three" type="text" name="3" maxlength="4" size="2"><br>
    </h3> 2 * 4 = </h3> <input id="four" type="text" name="4" maxlength="4" size="2"><br>
    </h3> 2 * 5 = </h3> <input id="five" type="text" name="5" maxlength="4" size="2"><br>
    </h3> 2 * 6 = </h3> <input id="six" type="text" name="6" maxlength="4" size="2"><br>
    </h3> 2 * 7 = </h3> <input id="seven" type="text" name="7" maxlength="4" size="2"><br>
    </h3> 2 * 8 = </h3> <input id="eigth" type="text" name="8" maxlength="4" size="2"><br>
    </h3> 2 * 9 = </h3> <input id="nine" type="text" name="9" maxlength="4" size="2"><br>
    </h3> 2 * 10= </h3> <input id="ten" type="text" name="10" maxlength="4" size="2"><br><br>

  <input id="submit" type="button" onclick="myFunction()" value="Submit Form">

  <h1 id="results"> Results</h1>

使用Javascript：

var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var three = document.getElementById("three").value;
var four = document.getElementById("four").value;
var five = document.getElementById("five").value;
var six = document.getElementById("six").value;
var seven = document.getElementById("seven").value;
var eight = document.getElementById("eight").value;
var nine = document.getElementById("nine").value;
var ten = document.getElementById("ten").value;

var results = document.getElementById("results");

function myFunction() {
var submit = document.getElementById("submit").submit();
   if (one === 2 && two === 4 && three === 6 && four === 8 && five === 10 &&  six === 12 && seven === 14 && eigth === 16 && nine === 18 && ten === 20) {
        document.getElementById("results").innerHTML = "Correct!"
    } else {
        document.getElementById("results").innerHTML = "Try Again!"
    }
 };

Answer 1

这就是你所期待的

＆＃13;

function myFunction() {
  var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
var three = document.getElementById("three").value;
var four = document.getElementById("four").value;
var five = document.getElementById("five").value;
var six = document.getElementById("six").value;
var seven = document.getElementById("seven").value;
var eight = document.getElementById("eight").value;
var nine = document.getElementById("nine").value;
var ten = document.getElementById("ten").value;

var results = document.getElementById("results");
var submit = document.getElementById("submit");
   if (one == 2 && two == 4 && three == 6 && four == 8 && five == 10 &&  six == 12 && seven == 14 && eight == 16 && nine == 18 && ten == 20) {
        document.getElementById("results").innerHTML = "Correct!"
    } else {
        document.getElementById("results").innerHTML = "Try Again!"
    }
 }

＆＃13;

h3{
display:inline;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
<form id="myForm">

    <h3> 2 * 1 = </h3> <input id="one" type="text" name="1" maxlength="4" size="2"><br>
    <h3> 2 * 2 = </h3> <input id="two" type="text" name="2" maxlength="4" size="2"><br>
    <h3> 2 * 3 = </h3> <input id="three" type="text" name="3" maxlength="4" size="2"><br>
    <h3> 2 * 4 = </h3> <input id="four" type="text" name="4" maxlength="4" size="2"><br>
    <h3> 2 * 5 = </h3> <input id="five" type="text" name="5" maxlength="4" size="2"><br>
    <h3> 2 * 6 = </h3> <input id="six" type="text" name="6" maxlength="4" size="2"><br>
    <h3> 2 * 7 = </h3> <input id="seven" type="text" name="7" maxlength="4" size="2"><br>
    <h3> 2 * 8 = </h3> <input id="eight" type="text" name="8" maxlength="4" size="2"><br>
    <h3> 2 * 9 = </h3> <input id="nine" type="text" name="9" maxlength="4" size="2"><br>
    <h3> 2 * 10= </h3> <input id="ten" type="text" name="10" maxlength="4" size="2"><br><br>

  <input id="submit" type="button" onclick="myFunction()" value="Submit Form">
  
    <h1 id="results"> Results</h1>
    </form>
    <script src="script.js"></script>
  </body>

</html>

＆＃13;

Answer 2

试试这段代码：

<预> <代码>

或者将其用于特定的两个数字：

<预> <代码>

HTML / Javascript中的乘法表

2 个答案: