Javascrript onclick更改图片标题

Question

I need to display the title of a currently loaded video under the player. The user clik on a thumbnail to load the video on the jwplayer. I can only load the first title.

 <div>Now playing: <span id='nowPlaying'>My 40th Aniversary</span> </div> <script type="text/javascript"> function changeTitle(){ var video = document.getElementById('vidTitle').getAttribute('title'); document.getElementById('nowPlaying').innerHTML = video; } </script> <!-- body of my pge --> <h2>Trips</h2> <ul> <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoElgin.mp4');"> <img src="http://www.example.com/images/triptoelgin.jpg" id='vidTitle' onclick='changeTitle()' title="Trip to Elgin "/></a>Trip to Elgin</li> <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoWaco.mp4');"> <img src="http://www.example.com/images/triptowaco.jpg" id='vidTitle' onclick='changeTitle()' title="Trip to Waco"/></a>Trip to Waco</li> </ul> <!-- begin snippet: js hide: false --> 

How can I add a variable to load the next video title? I tried this, but it gives undefined value.

Answer 1

In HTML, the id attribute must be unique. Right now, when you're calling document.getElementById('vidTitle') , the browser is picking the first one no matter what. If you want to identify which of the images you clicked on, I would send this to the changeTitle function like so:

JavaScript

function changeTitle(element){
  var video = element.getAttribute('title');
  document.getElementById('nowPlaying').innerHTML = video;
}

HTML

<ul>
  <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoElgin.mp4');"><img src="http://www.example.com/images/triptoelgin.jpg" id='vidTitle1' onclick='changeTitle(this)' title="Trip to Elgin "/></a>Trip to Elgin</li>
  <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoWaco.mp4');"> <img src="http://www.example.com/images/triptowaco.jpg"  id='vidTitle2' onclick='changeTitle(this)' title="Trip to Waco"/></a>Trip to Waco</li>
</ul>

Answer 2

    function changeTitle(element){
  var video = element.getAttribute('title');
  document.getElementById('nowPlaying').innerHTML = video;
}

Answer 3

 <div>Now playing: <span id='nowPlaying'>My 40th Aniversary</span> </div> <script type="text/javascript"> function changeTitle(video){ var video = video.getAttribute('title'); document.getElementById('nowPlaying').innerHTML = video; } </script> <!-- body of my pge --> <h2>Trips</h2> <ul> <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoElgin.mp4');"> <img src="http://www.example.com/images/triptoelgin.jpg" onclick='changeTitle(this)' title="Trip to Elgin "/></a>Trip to Elgin</li> <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoWaco.mp4');"> <img src="http://www.example.com/images/triptowaco.jpg" onclick='changeTitle(this)' title="Trip to Waco"/></a>Trip to Waco</li> </ul> <!-- begin snippet: js hide: false -->