Функция OnClick внутри кнопки изображения - PullRequest
Новая
       72

Функция OnClick внутри кнопки изображения

0 голосов
/ 02 мая 2020

Я пытаюсь создать игру-викторину, которая позволяет пользователю просто щелкнуть изображение в качестве ответа.

I 

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>

попытался сначала превратить изображения в кнопки, которые работали, потому что они нажимаемы. Однако у меня есть очень базовые c javascript знания и я не могу выполнить функцию «по щелчку», когда пользователь нажимает на изображение, программа проверит, является ли выбранное изображение правильным ответом, а затем вернет сообщение.

Ответы [ 3 ]

0 голосов
/ 02 мая 2020 

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>
0 голосов
/ 02 мая 2020

Вы можете получить значение идентификатора при нажатии на изображение, а затем сравнить его с исходным ответом, чтобы проверить, правильно оно или нет. 

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) "* ​​1011 * 'где' this 'является ссылкой.

0 голосов
/ 02 мая 2020

Здравствуйте, это просто, если я правильно понял, вам нужно использовать скрытые значения в вашем 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}'/>

Наконец, если вы используете al oop, вы можете использовать любую опцию с уникальным идентификатором, чтобы заставить его работать: 

    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, какой идентификатор является реальным ответом, даже если у вас много вариантов

ИСПОЛЬЗОВАНИЕ в вашем случае: 

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