Как динамически заполнить страницу div с помощью функций onClick, которые модифицируют видеоплеер HTML5?

Question

Как видно из слишком специфического заголовка, я пытаюсь использовать javascript для динамического добавления div на страницу (в зависимости от того, сколько видео мне нужно загрузить для медиапроигрывателя HTML5), и я хочу, чтобы каждый div имелотдельная функция onclick, которая изменяет источник медиаплеера.

Я получил страницу для динамического добавления div, но у div нет функций onClick, несмотря на то, что я назначал их в процессе создания.После некоторого (читай: много) поиска в Google я обнаружил, что проблема в том, что я могу только ссылаться на функцию, а не помещать конкретный код в событие onClick (я так думаю?). Итак, я изменил код, и теперь у меня есть это:

<video name = "myVideo" style = "width: 500px; height: 300px" id = "player" controls = "controls" autoplay = "autoplay">  
<source name = "VidSource" src = 'video.mp4'>  
<source name = "VidSource" src = 'video2.webm'>  
</video><br><br><br>  


<script type = "text/javascript">  
var sourceName = document.getElementsByName("VidSource");  

for (x = 0; x< sourceName.length; x = x+1)  
{  
    var stringToSend = sourceName[x].src;  
    var substringint = stringToSend.lastIndexOf("/");  
    stringToSend = stringToSend.substring((substringint + 1));  
    createDiv("Div" + x, 250, 40, stringToSend);  

    document.write("<br>");  
}  

function createDiv(id, width, height, toWrite)  
{  
    var newdiv = document.createElement('div');   
    newdiv.id = id;  
    newdiv.style.width = width;  
    newdiv.style.height = height;  
    newdiv.style.overflow = "auto";  

    newdiv.style.background = "#FF0000";  
    newdiv.style.border = "2px solid #FFFFFF";  

    var substringint = toWrite.lastIndexOf("/");  
    toWrite = toWrite.substring((substringint + 1));  

    newdiv.innerHTML = " <center> " + toWrite + "</center>";  
    newdiv.onClick = "changeSrc(" + toWrite ");";   
    document.body.appendChild(newdiv);  
}  

function changeSrc(src)  
{  
    document.myVideo.src = src;  
    video.load();  
    video.play();  
}  


</script>  

Итак, то, что это выводит, является просто медиаплеером, и никаких делений вообще.

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

Answer 1

Атрибут onclick пишется со строчной буквой 'c'.Это может быть вашей проблемой.

Но модель W3C для регистрации событий должна использовать addEventListener вместо присвоения атрибуту onclick. В этом уроке показано, как это сделать.Я бы использовал эту модель для лучшей переносимости (или еще лучше, используйте jQuery , который заботится обо всех проблемах переносимости).

Редактировать : О да, и какВы сказали в вопросе (но не отразили это в коде), вам нужно назначить функцию (используете ли вы onclick или addEventListener), а не строку, содержащую код.Таким образом, если у вас есть:

newdiv.onClick = "changeSrc(" + toWrite ");";

, используйте:

newdiv.onclick = function() { changeSrc(toWrite); };

или:

newdiv.addEventListener("click", function() { changeSrc(toWrite); }, false);

или еще лучше (наиболее переносимый), используя jQuery (требуетсячто вы импортируете эту библиотеку):

$(newdiv).click(function() { changeSrc(toWrite); });

Гораздо проще избежать ошибки, так как вам не нужно объединять строки и формировать собственный синтаксис JavaScript: обратите внимание, что в строковой версии вы бынеобходимо заключить в кавычки toWrite и экранировать любые специальные символы, которые не нужны в версии функции.