javascript createElement и setAttribute

Я начинаю учить себя javascript. Я думал, что попытаюсь создать сценарий, в который будет вставляться видео с YouTube, когда будет указан URL. Может ли кто-нибудь помочь мне понять, что я делаю неправильно, когда создаю элемент iframe, устанавливаю атрибуты и добавляю его как дочерний элемент в div? Я использую JSFiddle, и когда я проверяю элемент, в тег не добавляется тег. Благодарю!

Изменение: Здесь моя ссылка jsfiddle: http://jsfiddle.net/86W8N/2/

<p>Click the button to call function</p>
YoutubeURL: <input id="url" type="text">
<button onclick="myFunction()">Try it</button>

<div id="video_div">
</div>

<script>
function myFunction() {
    var urlValue = document.getElementById("url").value;
    var videoID = urlValue.substring(urlValue.indexOf('=') + 1);

    var video = document.createElement("iframe");
    video.setAttribute(title, "Test");
    video.setAttribute(width, "440");
    video.setAttribute(height, "390");
    video.setAttribute(src, "http://www.youtube.com/embed/" + videoID);
    video.setAttribute(frameborder, "0");

    var div_element = document.getElementById("video_div");

    div_element.appendChild(video);
}
</script>

ОТВЕТЫ

Ответ 1

Ваш код перестанет выполняться, если исключить исключение в title is not defined в

video.setAttribute(title, "Test");

В setAttribute(title,...) вы используете title как если бы это была переменная с названием title, но этого не существует. Вместо этого вы хотите передать строковое значение "title":

video.setAttribute('title', 'Test');

... и то же самое для других атрибутов...

Несколько советов, так как вы используете JSFiddle:

  • Сделайте привычку спасать скрипку и всегда предоставляйте ссылку вместе с вашим вопросом
  • В разделе "Рамки и расширения" на левой панели убедитесь, что вы установили javascript для загрузки с "no wrap", иначе вы не сможете вызвать метод из своего html так, как вы это сделали. (Это применимо, когда вы определяете свои функции JavaScript в панели JavaScript. Из вашего обновленного вопроса я вижу включенную ссылку на скрипт, которую вы сейчас кладете в HTML-разметку, поэтому у вас не будет этой проблемы)
  • Hit F12 в вашем браузере, и вы сможете увидеть фактическое сообщение об ошибке, которое производит ваш код.

Ответ 2

Вы должны обернуть атрибуты в кавычках ' или двойных кавычках ":

video.setAttribute('title', "Test");
video.setAttribute('width', "440");
video.setAttribute('height', "390");
video.setAttribute('src', "http://www.youtube.com/embed/" + videoID);
video.setAttribute('frameborder', "0");

Демо-версия скрипта