javascript - <input> 标签不适用于我的函数

Question

我的 HTML <input>标签无法与我的 Javascript 函数配合使用。

<center>
<input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
</center>

var rock = 1;
var paper = 2;
var scissors = 3;
var spock = 4;
var lizard = 5;

function Game() {

    var ComputerChoice = ((Math.Random() * 5) + 1);
    var UserChoice = ""

    if (UserChoice == ComputerChoice) {
        document.getElementById("user").innerHTML = "Its a tie! Your opponent also chose" + ComputerChoice;
    }

    if (ComputerChoice == 1) {
        return "Rock"
    }

    if (ComputerChoice == 2) {
        return "Paper"
    }

    if (ComputerChoice == 3) {
        return "Scissors"
    }

    if (ComputerChoice == 4) {
        return "Spock"
    }

    if (ComputerChoice == 5) {
        return "Lizard"
    }

    if (ComputerChoice == 1 && UserChoice == 2) {
        document.getElementById("user").innerHTML="You won! The computer chose" + ComputerChoice;
    }
}

Answer 1

UserChoice 从未被赋值

您正在比较UserChoice至ComputerChoice ，但是UserChoice从未分配过值(空字符串除外)。所以这种比较是没有意义的。

var UserChoice = ""

您需要从 DOM 中获取用户的选择。

var UserChoice = document.getElementById('user').value;

onsubmit 没有被触发

您似乎误解了onsubmit属性。它应该指向一个在表单提交时运行的函数。另外，它需要位于 form 中标签，而不是 input标签。

<form onsubmit="Game()">
    <input type="text" id=user onsubmit="UserChoice" placeholder="Make your choice...">
    <input type="submit" value="Submit">
</form>

中心标签已弃用

最后，<center>标签从 HTML 4 开始已被弃用。要使元素居中，您可以使用 CSS。

<style>
    center {
        text-align: center;
    }
</style>

<div class="center">
    <input id="user" ...>
</div>