Отображение измененного заголовка изображения

Я пытаюсь отобразить заголовок моего изображения прямо под изображением. У меня есть событие onClick на изображении, которое меняет заголовок изображения, когда вы нажимаете на него.

<!DOCTYPE html>
<html>
<head>
    <title>
        onClick Handler
    </title>
    <h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
    <img src="NukaCola.jpg" title="Nuka Cola" id="id1" height="550" width="350" onClick="this.title='You Clicked!';"/>
    </br><script>
        var x=document.getElementById("id1");
        document.write(x.title);
    </script>
</body>
</html>

Теперь я знаю, что использовать document.write() неправильно, и он даже не выполняет то, что я хочу сделать, потому что я хотел бы отобразить новый заголовок изображения после того, как пользователь нажал на изображение. Как мне этого добиться?

Источник

2 ответа 

<!DOCTYPE html>
<html>
<head>
    <title>
        onClick Handler
    </title>
    <h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
    <img src=NukaCola.jpg title="Nuka Cola" id="id1" height=550 width=350 onClick="updateTitle(this)"/>
    <p id='id1Text'></p>
    </br>
    <script>
        function updateTitle(img) {
            img.title = 'You clicked!';
            document.getElementById(img.id +'Text').textContent = img.title;
        }
    </script>
</body>
</html>
Источник

Что-то заметил: у вас есть тег h3, объявленный внутри тега head.

Источник
Другие вопросы по тегам