JavaScript 函数没有运行？ [关闭]答案

【问题标题】：JavaScript function not running? [closed]JavaScript 函数没有运行？ [关闭]
【发布时间】：2014-05-23 22:33:01
【问题描述】：

好的，所以我和我的朋友对编程比较陌生，我们有一些经验，但不是太多，我敢肯定我们在这里犯了一个愚蠢的错误。我们正在尝试使用 HTML 和 JavaScript 制作“石头、剪纸、剪刀、蜥蜴、史波克”游戏。这是我们的代码：

<td>
        <p style="font-size: 12px; font-family: Arial;">Choose...</p>
            <form name="userInput"  action="javascript:getUserChoice">
                <input type="radio" name="userChoice" id="userChoice_rock" value="rock">Rock</input> </br>
                <input type="radio" name="userChoice" id="userChoice_paper" value="paper">Paper</input> </br>
                <input type="radio" name="userChoice" id="userChoice_scissors" value="scissors">Scissors</input> </br>
                <input type="radio" name="userChoice" id="userChoice_lizard" value="lizard">Lizard</input> </br>
                <input type="radio" name="userChoice" id="userChoice_spock" value="spock">Spock</input> </br>
                <input type="submit" value="Enter" />
            </form>
    </td>

    <script type="text/javascript">


    var userChoice = getUserChoice();

    function getUserChoice(userChoice)
    {

        if (document.userInput.getElementById('userChoice_rock').checked)
        {
        userChoice = "rock";
        }

        else if (document.userInput.getElementById('userChoice_paper').checked)
        {
        userChoice = "paper"
        }

        else if (document.userInput.getElementById('userChoice_scissors').checked)
        {
        userChoice = "scissors"
        }

        else if (document.userInput.getElementById('userChoice_lizard').checked)
        {
        userChoice = "lizard"
        }
        else if (document.userInput.getElementById('userChoice_spock').checked)
        {
        userChoice = "spock"
        }
}       

    </script>

我确定我们在这里犯了一个明显的错误。我一直在使用 Chrome 开发人员工具（检查元素）来查找各种语法错误等。这对我来说可能不是很专业，但值得一试。你看到任何错误吗？我们确实知道如何为计算机选择和比较编写脚本，因为我们有这方面的经验。我们唯一的问题是定义用户选择。如果这里有人能帮我解决这个问题，那就太好了！

【问题讨论】：

那么问题是什么？什么不起作用？使用 Chrome 开发者工具绝对是专业的，但是使用它的结果是什么？其实我会建议你们暂时删除这个问题，完成一些很好的和非常基本的Javascript教程，当你觉得你明白了，再试着写这个游戏。在这个阶段我们真的无法提供帮助，因为这个网站不是来指导的。祝你好运。
为什么getUserChoice在你不使用的时候要求参数？
而不是userChoice = "rock"; 使用return "rock";，然后将相同的更改应用于所有其他人

标签： javascript html function

【解决方案1】：

主要问题是您的全局变量userChoice 与函数的参数同名。函数getUserChoice 用条件中设置的值覆盖它的参数值。然后它什么也不做；一旦你离开函数的作用域，它就会丢失。

如果你想让函数对全局变量进行操作，不要给函数一个同名的参数。

第二个问题是您将函数的返回值分配给全局变量userChoice，并且由于它不返回任何内容，因此它实际上用未定义的值覆盖了该值。所以即使你做了上述，它仍然行不通。

第四个document.userInput 未定义。您需要查询它，例如document.getElementById('userInput').

总而言之，更好的解决方案是这样做：

<html>
    <head>
        <script>
            var userChoice;

            var setUserChoice = function(event) {
                event.preventDefault();
                var choices = event.target.userChoice;

                for (var i =0; i < choices.length; i++) {
                    if (choices[i].checked) {
                        userChoice = choices[i].value;
                    }
                }

                event.target.choice.value = userChoice;
            }

            window.onload = function() {
                var form = document.getElementById('userInput');
                form.addEventListener('submit', setUserChoice, false);
            };
        </script>
    </head>

    <body>
        <form id="userInput">
                <input type="radio" name="userChoice" id="userChoice_rock" value="rock">Rock</input> </br>
                <input type="radio" name="userChoice" id="userChoice_paper" value="paper">Paper</input> </br>
                <input type="radio" name="userChoice" id="userChoice_scissors"value="scissors">Scissors</input> </br>
                <input type="radio" name="userChoice" id="userChoice_lizard" value="lizard">Lizard</input> </br>
                <input type="radio" name="userChoice" id="userChoice_spock" value="spock">Spock</input> </br>
                <input type="submit" value="Enter" /></br>
                <output name="choice"></output>
        </form>
    </body>
</html>

【讨论】：

【解决方案2】：

之后，即使在用户做出真正的选择之后，您也必须在开始时调用 getUserChoice 方法，您必须将此函数附加到 clic 事件，如下所示：

var submit_button = document.getElementById('mybutton');
submit_button.addEventListener('click', function() {
    getUserChoice();
}, false);

【讨论】：

【解决方案3】：

好的，有两件事，首先我需要放 ()，没有我的 Firefox 不要调用该函数

<form name="userInput"  action="javascript:getUserChoice()">

其次，你需要改变：

if (document.userInput.getElementById('userChoice_rock').checked)

到

if (document.getElementById('userChoice_rock').checked)

因为userInput 不是document 的成员

如果你现在放

alert(userChoice);

在函数结束时，您将在点击提交按钮时获得用户选择

【讨论】：