javascript createElement et setAttribute

Je commence à m'enseigner javascript. J'ai pensé que je voudrais essayer de faire un script qui intègre une vidéo de youtube, lorsqu'il est fourni avec une URL. Quelqu'un peut-il m'aider à comprendre ce que je fais mal quand je créer l'élément iframe, définir les attributs, et l'ajouter comme un enfant à la div? Je suis sur JSFiddle, et quand j'ai inspecter l'élément no tag semble avoir été ajouté à la div. Merci!

Edit: Voici mon jsfiddle lien: 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>
d'abord veuillez fournir jsfiddle url
et la deuxième - êtes-vous sûr div_element n'est pas null dans votre cas?
troisième et le plus important - ne la console d'afficher les erreurs? 🙂
#video_div est juste là, dans le balisage dans la question d'origine, bien que, et nous pouvons voir comment myFunction est appelé, donc ce ne sera pas avant DOMReady. Il est probablement prudent de supposer que la cible de la div.

OriginalL'auteur user3382426 | 2014-03-05

  1. 30

    Votre code d'arrêt de l'exécution, en jetant un title is not defined exception à 

    video.setAttribute(title, "Test");

    Dans setAttribute(title, ...) vous utilisez title comme si c'était une variable nommée titre, mais qui n'existe pas. Vous voulez, au lieu de passer le chaîne de valeur "title":

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

    ... et de même pour les autres attributs...

    Quelques conseils en plus depuis que vous utilisez JSFiddle:

    • Prenez l'habitude de sauvegarder le violon et toujours fournir le lien avec votre question
    • Sous "Cadre & Extensions" dans le panneau de gauche, assurez-vous que vous avez mis le javascript à charger avec "sans retour", sinon vous ne serez pas en mesure d'appeler la méthode à partir de votre code html de la manière que vous avez fait. (Cela s'applique lorsque vous êtes à la définition de vos fonctions JavaScript dans le code JavaScript, panneau. Je vois de mise à jour de votre question avec le violon lien que vous êtes en train de les mettre tous dans le balisage HTML, de sorte que vous n'aurez pas ce problème)
    • Frapper la touche F12 de votre navigateur, et vous serez en mesure de voir le message d'erreur réel que votre code produit.

    OriginalL'auteur David Hedlund

  2. 5

    Vous avez besoin d'envelopper vos attributs entre guillemets ' ou des guillemets ":

    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");

    Violon Démo

    OriginalL'auteur Felix