个人中心
gpt4 book ai didi

javascript - 如何取消图像模糊？

转载 作者：行者123 更新时间：2023-12-02 14:54:22 25 4
gpt4 key购买 nike

我在使用 JavaScript 创建游戏时遇到一些问题。我不能使用jquery。我遇到的问题是，当我选择模糊图像时，它不会取消模糊，但它应该可以。我尝试过更改函数的名称、图像、加载名称，但这似乎不起作用。我还检查了 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>

最佳答案

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

您使用 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);

除了事件处理之外，还有很多其他方面可以改进。有很多重复的代码和函数，它们执行相同的操作，但名称不同。但我想这是一个不同的问题/主题。

关于javascript - 如何取消图像模糊？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35939028/

25 4 0
文章推荐： javascript - 如何再次获取表单中的特定行数据进行编辑
文章推荐： haskell - 使用 'where' 表示法时解析错误 - 如何正确格式化此结构？
文章推荐： haskell - haskell 中列表列表的模式匹配
文章推荐： javascript - 在开发 WordPress 插件时无法解决使用 cookie 已发送 header 的问题吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com