Javascrript onclick изменить название изображения

Question

Мне нужно отобразить заголовок загруженного в данный момент видео под плеер. Пользователь clik на миниатюре для загрузки видео на jwplayer. Я могу загрузить только первый заголовок.

<div>Now playing: <span id='nowPlaying'>My 40th Aniversary</span> </div> 
 

 

 
<script type="text/javascript"> 
 
function changeTitle(){ 
 
\t var video = document.getElementById('vidTitle').getAttribute('title'); 
 
\t 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 -->

Как я могу добавить переменную, чтобы загрузить следующий заголовок видео? Я пробовал это, но это дает неопределенное значение.

Answer 1

В HTML атрибут id должен быть уникальным. Прямо сейчас, когда вы звоните document.getElementById('vidTitle'), браузер выбирает первый, несмотря ни на что. Если вы хотите, чтобы определить, какие из изображений, которые вы выбрали, я бы отправить this функции changeTitle так:

код 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

<div>Now playing: <span id='nowPlaying'>My 40th Aniversary</span> </div> 
 

 

 
<script type="text/javascript"> 
 
function changeTitle(video){ 
 
\t var video = video.getAttribute('title'); 
 
\t 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 -->

Answer 3

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