顯示更改後的圖像標題

-1

我正試圖在圖像本身下方顯示圖像的標題。我在圖像中有一個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（）的，它甚至沒有完成我想做的事情，因爲我想，以顯示新的圖片標題用戶點擊後在圖像上。我怎樣才能做到這一點？

來源

2015-09-04 afryingpan

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

來源

2015-09-04 03:40:37

注意到了一些事情：在head標籤中聲明瞭一個h3標籤。

來源

2015-09-04 03:42:46

顯示更改後的圖像標題

回答

相關問題