图像按钮内的 OnClick 函数答案

【问题标题】：OnClick function within a image button图像按钮内的 OnClick 函数
【发布时间】：2020-08-17 07:30:37
【问题描述】：

我正在尝试创建一个问答游戏，允许用户简单地单击图像作为答案。

我

function checkimage(){
    
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:50px;
  background-color:rgba(255, 128, 0, 0.54);
  text-align: center
}


h2{
    padding: 10px;
    background-color: red;
    
}


#container{
    margin : 20px auto;
    background-color: white;
    height: 60%;
    width : 100%;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
}

*{
    box-sizing: border-box;
}

.column{
    float:left;
    width:100%;
    padding:5px;
}

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">
    
    <title>Quiz</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>
            
        <div class = "quiz">
            <div class="column">
            <input type="image" id="forest" src="forest.jpg" style="width:50%"> </div> 
            
            <input type="image" id="snow" src="snow.jpg" style="width:50%"
                   onclick="checkimage"> </div>
            


        </div>
              
            
            </div>
        
    <div>
        
       
    <script src="game.js"></script>
        
    </div>
</body>
</html>

首先尝试将图像制作成按钮，因为它们是可点击的。但是，我有非常基本的 javascript 知识，我无法执行“点击”功能，一旦用户点击图像，程序会检查点击的图片是否是正确的答案，然后返回一条消息。

【问题讨论】：

如何知道正确答案？有api吗？
所以基本上有一个问题“哪个是苹果”，用户必须点击其中一张图片，一旦点击程序应该检查点击的图片是否对应正确的答案跨度>

标签： javascript image button onclick

【解决方案1】：

你可以在点击图片时获取id值，然后你可以和你的原始答案进行比较，以检查它是否正确。

function checkimage(element) {
  var rightAns = "Apple";
  if (element.id == rightAns) {
    alert("You selected right ans!")
  } else {
    alert("You selected wrong ans!")
  }
}

<h3>Which image is of an apple?</h3>

<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>

<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>

请注意，这里我将图像元素的引用传递给点击事件上的javascript函数，如 'onclick="checkimage(this)"' 其中 'this' 是参考。

【讨论】：

【解决方案2】：

您好，如果我理解正确，这很简单，例如，您需要在 html 代码中使用隐藏值：

//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values 
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>

最后，如果您使用循环，您可以使用任何带有唯一 ID 的选项来使其工作：

    function checkimage(id){
    $answer = $('#answer_'+id).val().toString;
    }

//or while//
        for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
        <input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
        }
        //end//

事实上，即使你有很多选择，你也是在告诉 JS 什么 ID 才是真正的答案

你的情况：

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">

    <title>Quiz</title>
    <link rel="stylesheet" href="game.css">

    <script>
$( document ).ready(function() {
    console.log( "ready!" );

  function checkimage(value){
            alert('answer is:' + value);

            if (value == "apple"){

                //do something
             }else{
               //optionally do something here too  
            }
        }  

});


     </script>
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>

        <div class = "quiz">
            <div class="column">
            <input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div> 

            <input type="image" id="snow" src="snow.jpg" style="width:50%"
                    onClick="checkimage('banana');return false;"> </div>



        </div>


            </div>

    <div>


    <script src="game.js"></script>

    </div>

【讨论】：

谢谢你，我会在我的代码中输入这个，你能告诉我吗？我对编码还是很陌生
您必须以两种方式插入：
在你的身体里：
在你的头脑中

如果答案是苹果，我已经添加了一个 document.write("well done")，但是当点击正确的选项时它不会显示消息

我已经用您的完整 html 代码编辑了我的答案，因此您可以复制并粘贴到您自己的代码中并进行测试。 idk 为什么你使用 document.write？不听我的回答？我想知道

【解决方案3】：

function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}



    //or while//
        for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
        <input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
        }
        //end//

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:50px;
  background-color:rgba(255, 128, 0, 0.54);
  text-align: center
}


h2{
    padding: 10px;
    background-color: red;
    
}


#container{
    margin : 20px auto;
    background-color: white;
    height: 60%;
    width : 100%;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
}

*{
    box-sizing: border-box;
}

.column{
    float:left;
    width:100%;
    padding:5px;
}

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width"> 
<head>
    <meta charset="UTF-8">
    
    <title>Quiz</title>
    <script>function checkimage(value)</script>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h1> Welcome to the Shopping Quiz Game</h1>
    <div id="container">
        <div class = "question">
            <h2>which of the following is a fruit? click on the image </h2>
            
        <div class = "quiz">
            
             
            <input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div> 
            
            <input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
            

        </div>
              
            
            
        
    <div>
        
       
    <script src="test.js"></script>
        
    </div>
</body>
</html>

【讨论】：

@Crythephoenix - 我是否以正确的方式放置代码，它不会返回通知用户他们得到正确答案的消息