Question

我试图在图像本身下面显示我的图像标题。我在图像中有一个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（）是不好的形式，它甚至没有完成我想做的事情，因为我想在用户之后显示新的图像标题点击了图片。我怎样才能做到这一点？

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

Answer 2

注意到：你在head标签中声明了一个h3标签。

显示更改的图像标题

2 个答案: