JavaScript函数没有运行？ [英] JavaScript function not running?

问题描述

好的，所以我和我的朋友对编程颇为陌生，我们有一些经验，但不是太多，我相信我们在这里犯了一个愚蠢的错误。我们正试图用HTML和JavaScript制作Rock，Paper，Scissors，Lizard，Spock​​游戏。以下是我们的代码：

 < td> 
< p style =font-size：12px; font-family：Arial;>选择...< / p> 
< form name =userInputaction =javascript：getUserChoice> 
< input type =radioname =userChoiceid =userChoice_rockvalue =rock> Rock< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_papervalue =paper> Paper< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_scissorsvalue =scissors> Scissors< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_lizardvalue =lizard> Lizard< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_spock​​value =spock​​> Spock< / input> < / BR> 
< input type =submitvalue =Enter/> 
< / form> 
< / td> 
 
< script type =text / javascript> 
 
 
 var userChoice = getUserChoice（）; 
 
函数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开发人员工具（Inspect Element）来查找各种语法错误等。这对我来说可能不是很专业，但值得一试。你有没有看到任何错误？我们知道如何为电脑的选择和比较编写脚本，因为我们有这方面的经验。我们唯一的问题是定义用户选择。如果有人能帮助我解决这个问题，那真是太好了！ 解决方案

主要的问题是你的全局变量 userChoice 与函数的参数具有相同的名称。函数 getUserChoice over将它的参数值与条件中设置的值一起写入。然后它对此无能为力;一旦你离开函数的作用域，它就会丢失。

如果你希望函数对全局变量进行操作，不要给这个函数一个同名的参数。第二个问题是你分配了全局变量 userChoice 你函数的返回值，并且因为它没有不会返回任何东西，它实际上会将值写入undefined。所以，即使你做了上面的事情，它仍然无法正常工作。

第四个 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]。值; 
} 
} 
 
 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 =radioname =userChoiceid =userChoice_rockvalue =rock> Rock< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_papervalue =paper> Paper< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_scissorsvalue =scissors> Scissors< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_lizardvalue =lizard> Lizard< / input> < / BR> 
< input type =radioname =userChoiceid =userChoice_spock​​value =spock​​> Spock< / input> < / BR> 
< input type =submitvalue =Enter/>< / br> 
< output name =choice>< / output> 
< / form> 
< / body> 
< / html> 
  

Okay, so me and my friend are rather new to programming, we have some experience, but not too much, and I'm sure we're just making a stupid mistake here. We are attempting to make a "Rock, Paper, Scissors, Lizard, Spock" game with HTML and JavaScript. Here's our code:

<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>

I'm sure we're making an obvious mistake here. I've been using Chrome developer tools (Inspect Element) to find various syntax errors and such. That's probably not very professional of me, but it's worth a shot. Do you see any errors? We do know how to write a script for the computer choice and comparisons as we have experience with that. Our only issue is defining the user choice. And it'd be really great if anyone here could help me out with this!

解决方案

The main problem is that your global var userChoice has the same name as the function's argument. The function getUserChoice over writes it's parameters value with the values set in the conditionals. Then it does nothing with it; once you leave the function's scope, it's lost.

If you want the function to operate on the global variable, don't give the function a parameter with the same name.

The second problem is that you assign the global varible userChoice the return value of your function, and since it doesn't return anything, it actually over writes the value with undefined. So even if you did the above, it still wouldn't work.

Fourth document.userInput isn't defined. You need to query for it, e.g. document.getElementById('userInput').

All in all, a better solution would be to do this:

<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>

这篇关于JavaScript函数没有运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！