如何取消模糊图像？

Question

我在使用 javascript 创建游戏时遇到了一些问题。我不能使用 jquery。我遇到的问题是，当我 select 模糊图像时，它并没有消除模糊，它应该消除模糊。我试过更改函数的名称、图像、加载名称，但这似乎没有用。我还检查了 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 事件（例如 "click" 或 "load"）的方式。目前，您正在覆盖 onload 方法 5 次：

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

加载 window 时，只会执行最后设置的初始化方法（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);

除了您的事件处理之外，您还可以改进许多其他方面。有很多重复的代码和函数在某种程度上做同样的事情但有不同的名字。但我想那是不同的 question/topic.

如何取消模糊图像？

How do I unblur an image?

javascript

image

function

onload