javascript - Javascrript onclick change image title -

javascript - Javascrript onclick change image title -

i need display title of loaded video under player. user clik on thumbnail load video on jwplayer. can load first title.

class="snippet-code-html lang-html prettyprint-override"><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 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 elgin "/></a>trip 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 waco"/></a>trip waco</li> </ul> <!-- begin snippet: js hide: false -->

how can add together variable load next video title? tried this, gives undefined value.

in html, id attribute must unique. right now, when you're calling document.getelementbyid('vidtitle'), browser picking first 1 no matter what. if want identify of images clicked on, send this changetitle function 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 elgin "/></a>trip 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 waco"/></a>trip waco</li> </ul>

javascript variables