Как я могу отобразить текст на изображении в html, используя обработчик события onclick - PullRequest
Новая
       44

Как я могу отобразить текст на изображении в html, используя обработчик события onclick

0 голосов
/ 22 апреля 2020 
<!DOCTYPE html>
<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Squares</title>
        <script type="text/javascript">
        function SayColor(color) {
          document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
        }
        </script>
 </head>

  <body>

    <div style="text-align:center">
    <button onclick="SayColor()> <img src="red-square.png" height="150" width="150" ></button>
    <img src="green-square.png" height="150" width="150"> 
    <img src="blue-square.png" height="150" width="150"> 
    <h3 id="message">
    </h3>
    </div>

</body>
</html>

Это моя попытка в начале кода, я не уверен, как это закончить sh. Я знаком с обработчиками событий, но не с функциями. Я пытаюсь отобразить текст в каждом окне изображения при нажатии, что гласит: «Вы нажали на квадрат [цвет квадрата]!»

1 Ответ

0 голосов
/ 22 апреля 2020

Хорошо, я вижу, что вы определяете функцию, но она требует некоторого аргумента, который вы не передаете. И если вам просто нужно нажать, кнопка не нужна, как вы можете попробовать, как показано ниже, добавьте обработчик событий для самого элемента image dom. PS Вы просто не можете передать его как красный, так как он будет неопределенным, поэтому передавая строковое значение здесь. 

    <!DOCTYPE html>
<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Squares</title>
        <script type="text/javascript">
        function SayColor(color) {
          document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
        }
        </script>
 </head>

  <body>

    <div style="text-align:center">
     <img onclick=SayColor("RED") src="red-square.png" height="150" width="150" >
    <img onclick=SayColor("Green") src="green-square.png" height="150" width="150"> 
    <img onclick=SayColor("Blue") src="blue-square.png" height="150" width="150"> 
    <h3 id="message">
    </h3>
    </div>

</body>
</html>

Надеюсь, это поможет! Удачного кодирования!

...