显示更改的图像标题答案

【问题标题】：Displaying a changed image title显示更改的图像标题
【发布时间】：2015-09-04 03:27:04
【问题描述】：

我正在尝试在图片本身的正下方显示图片的标题。我在图片中有一个 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() 是一种不好的形式，它甚至无法完成我想做的事情，因为我想在用户单击图像后显示新的图像标题。我怎样才能做到这一点？

【问题讨论】：

标签： javascript image innerhtml document.write

【解决方案1】：

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

【讨论】：

【解决方案2】：

注意到一些事情：你在 head 标记中声明了一个 h3 标记。

【讨论】：