Question

我在使用javascript创建游戏时遇到了一些问题。我不能使用jquery。我遇到的问题是，当我选择模糊的图像时，它不应该是不显眼的，它应该这样做。我已经尝试更改函数的名称，图像，onload名称，但似乎没有工作。我还检查了F12开发人员工具并进行了所需的更改，仍然没有运气使其正常工作。

有人可以看看下面的代码并给我一些帮助，说明它为什么不起作用。我是javascript的新手，所以我还是习惯了它。

<!DOCTYPE html>
<html>
<head>
<title> Who Am I? </title>

<script type="text/javascript">

        var imageone = document.getElementById("Zero");
        var imagetwo = document.getElementById("One");
        var imagethree = document.getElementById("Two");
        var imagefour = document.getElementById("Three");
        var imagefive = document.getElementById("Four");
        var imagesix = document.getElementById("Five");

        window.onload = init1;
        function init1 () {
        var imageone = document.getElementById("Zero");
        imageone.onclick = showAnswerone;
        }

        function showAnswerone () {
        var imageone = document.getElementById("Zero");
        imageone.src="Zero.jpg";
        }

        window.onload = init2;
        function init2 () {
        var imagetwo = document.getElementById("One");
        imagetwo.onclick = showAnswertwo;
        }

        function showAnswertwo () {
        var imagetwo = document.getElementById("One");
        imagetwo.src="One.jpg";
        }

        window.onload = init3;
        function init3 () {
        var imagethree = document.getElementById("Two");
        imagethree.onclick = showAnswerthree;
        }

        function showAnswerthree () {
        var imagethree = document.getElementById("Two");
        imagethree.src="Two.jpg";
        }

        window.onload = init4;
        function init4 () {
        var imagefour = document.getElementById("Three");
        imagefour.onclick = showAnswerfour;
        }

        function showAnswerfour () {
        var imagefour = document.getElementById("Three");
        imagefour.src="Three.jpg";
        }

        window.onload = init5;
        function init5 () {
        var imagefive = document.getElementById("Four");
        image.onclick = showAnswerfive;
        }

        function showAnswerfive () {
        var imagefive = document.getElementById("Four");
        imagefive.src="Four.jpg";
        }

        window.onload = init6;
        function init6 () {
        var imagesix = document.getElementById("Five");
        imagesix.onClick = showAnswersix;
        }

        function showAnswersix () {
        var imagesix = document.getElementById("Five");
        imagesix.src="Five.jpg";
        }

        function submitForm()
        {
        var var_one = 0, var_two = 0, var_three = 0;
        var var_four = 0, var_five = 0, var_six = 0;
        }

        function var_oneb(){
            var_one=5;
            return true;
        }

        function var_onea(){
            var_one=0;
            return true;
        }

        function var_twob(){
            var_two=5;
            return true;
        }
        function var_twoa(){
            var_two=0;
            return true;
        }

        function var_threeb(){
            var_three=5;
            return true;
        }

        function var_threea(){
            var_three=0;
            return true;
        }


        function var_fourb(){
            var_four=5;
            return true;
        }

        function var_foura(){
        var_four=0;
        return true;
        }


        function var_fiveb(){
            var_five=5;
            return true;
        }

        function var_fivea(){
            var_five=0;
            return true;
        }

        function var_sixb(){
            var_six=5;
            return true;
        }

        function var_sixa(){
            var_six=0;
            return true;
        }


        function results_addition() {
        var var_results=var_one+var_two+var_three+var_four+var_five+var_six;
        if(var_results<=29){
            document.getElementById('choice1').value="Not all answers are correct";
        }
        else{
        if(var_results>=30){
        document.getElementById('choice1').value="All answers are correct";
        }
        else{
        document.getElementById('choice1').value="All answers are correct";
        }
        }
        }

</script>

<style>
    body {
    background-color: #ff0000;
    }

    div#grid {
        position: relative;
        width: 500px;
        height: 300px;
        margin-left: 50;
        margin-right: 50;
    }

    table {
        border-spacing: 0px;
        position: absolute;
        left: 40px;
        top: 40px;
        border-collapse: collapse;
        padding: 0px;
        margin: 0px;
    }

    td {
        border: 1px solid white;
        text-align: center;
        width: 160px;
        height: 110px;
        vertical-align: middle;
        align-content: stretch;
        padding: 5px;
        margin: 0px;
    }

    h2 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 30px;
    }

    h3 {
        font-family: verdana, arial;
        text-align: center;
        color: white;
        font-size: 18px;
    }
</style>
</head>

<body>
    <div id="grid">
    <h2> Who Am I? </h2>
    <table>
    <tr>
    <td> <img id = "Zero" src = "Zeroblur.jpg"> </td>
    <td> <img id = "One" src = "Oneblur.jpg"> </td>
    <td> <img id = "Two" src = "Twoblur.jpg"> </td>
    </tr>
    <tr>
    <td> <img id = "Three" src = "Threeblur.jpg"> </td>
    <td> <img id = "Four" src = "Fourblur.jpg"> </td>
    <td> <img id = "Five" src = "Fiveblur.jpg"> </td>
    </tr>
    </table>
    </div>
    <br><br><br><br><br><br><br><br>
    <h3> I am a Rugby League Player. </h3>
    <h3> Click on me to reveal my identity! </h3>
    <br>
    <h3>Which Player am I</h3>
    <hr>
    <form action="">
    <h3>Player 1 </h3>
<center>
    <h3>  
    Shaun Johnson <INPUT TYPE="radio" NAME="Ra1" VALUE="0" OnClick="var_onea()">   
    Sonny Bill Williams <INPUT TYPE="radio" NAME="Ra1" VALUE="5" OnClick="var_oneb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 2 </h3>
<center>
    <h3>   
    Gareth Widdop <INPUT TYPE="radio" NAME="Ra2" VALUE="0" OnClick="var_twoa()">   
    Sam Tomkins <INPUT TYPE="radio" NAME="Ra2" VALUE="5" OnClick="var_twob()"> 
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 3 </h3>
<center>
    <h3>   
    James Graham <INPUT TYPE="radio" NAME="Ra3" VALUE="5" OnClick="var_threea()">   
    Sam Burgess <INPUT TYPE="radio" NAME="Ra3" VALUE="10" OnClick="var_threeb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 4 </h3>
<center>
    <h3>  
    Matthew Scott <INPUT TYPE="radio" NAME="Ra4" VALUE="5" OnClick="var_foura()">   
    Johnathon Thurston <INPUT TYPE="radio" NAME="Ra4" VALUE="10" OnClick="var_fourb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 5 </h3>
<center>
    <h3>  
    Neil Lowe <INPUT TYPE="radio" NAME="Ra5" VALUE="5" OnClick="var_fivea()">   
    Danny Brough <INPUT TYPE="radio" NAME="Ra5" VALUE="10" OnClick="var_fiveb()">
    </h3>
</center>
    <br>
    <hr>

    <h3>Player 6 </h3>
<center>
    <h3>  
    Mitch Garbutt  <INPUT TYPE="radio" NAME="Ra6" VALUE="5" OnClick="var_sixa()">   
    Ryan Hall <INPUT TYPE="radio" NAME="Ra6" VALUE="10" OnClick="var_sixb()">
    </h3>
</center>
    <br>
    <hr>
    <br>
<center>
    <INPUT TYPE="button" VALUE="Calculate" OnClick="results_addition()"> Your Score:
    <INPUT TYPE="text" id="choice1" NAME="choice1" VALUE="" SIZE=20> 
</center>
</form>
</body>
</html>

Answer 1

应该让您回到正轨的简短回答：

您使用onClick代替onclick将点击事件监听器添加到图片中。

更长的答案可能有助于让一切正常运作：

可以改进将事件侦听器附加到DOM事件（例如“单击”或“加载”）的方式。目前，您将覆盖onload方法5次：

window.onload = init1;
// ...
window.onload = init2;
// ...
// etc.

在加载窗口时，只会执行最后一次设置的init方法（init6，在你的情况下）。

如果要使用window.onload = method;，则必须创建一个执行所有单独init方法的init方法。像这样：

function init() {
  init1();
  init2();
  // etc.
};

window.onload = init;

更好的方法是通过addEventListener方法添加事件侦听器。通过使用addEventListener，您可以添加将在事件发生时执行的多个方法。您可以在this MDN page上了解有关此方法的更多信息。

// For just one event listener, this can work:
element.onclick = onClick;

// If you want to execute multiple methods when an event happens, you'll need:
element.addEventListener("click", doSomething);
element.addEventListener("click", doSomethingElse);

除了你的事件处理之外，还有其他一些你可以改进的东西。有很多重复的代码和函数，它们做同样的事情，但有不同的名称。但我想这是一个不同的问题/主题。

如何取消图像？

1 个答案: