usuario3382426
Estoy empezando a aprender javascript por mi cuenta. Pensé que intentaría hacer un script que incrustara un video de YouTube cuando se le proporcionara una URL. ¿Alguien puede ayudarme a entender qué estoy haciendo mal cuando creo el elemento iframe, establezco los atributos y lo agrego como elemento secundario al div? Estoy usando JSFiddle, y cuando inspecciono el elemento, no parece que se haya agregado ninguna etiqueta al div. ¡Gracias!
Editar: Aquí está mi enlace 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>
Su código dejará de ejecutarse, lanzando un title is not defined
excepción en
video.setAttribute(title, "Test");
En setAttribute(title, ...)
estás usando title
como si fuera una variable llamada título, pero eso no existe. En su lugar, desea pasar el valor de cadena "title"
:
video.setAttribute('title', 'Test');
… y lo mismo para los demás atributos…
Algunas sugerencias más ya que estás usando JSFiddle:
- Acostúmbrese a guardar el violín y proporcione siempre el enlace junto con su pregunta.
- En “Marco y extensiones” en el panel de la izquierda, asegúrese de haber configurado el javascript para que se cargue con “sin ajuste”, de lo contrario, no podrá llamar al método desde su html como lo ha hecho. (Esto se aplica cuando está definiendo sus funciones de JavaScript en el panel de JavaScript. Veo en su pregunta actualizada con el enlace de violín incluido que actualmente lo está poniendo todo en el marcado HTML, por lo que no tendrá este problema)
- Presione F12 en su navegador y podrá ver el mensaje de error real que produce su código.
Necesitas envolver tus atributos entre comillas '
o comillas dobles "
:
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");
primero proporcione la URL de jsfiddle
– lukas.pukenis
5 de marzo de 2014 a las 7:46
y segundo: ¿está seguro de que div_element no es nulo en su caso?
– lukas.pukenis
5 de marzo de 2014 a las 7:47
tercero y más importante: ¿la consola muestra errores? 🙂
– lukas.pukenis
5 de marzo de 2014 a las 7:51
@lukas:
#video_div
Sin embargo, está justo ahí en el marcado en la pregunta original, y podemos ver cómomyFunction
se llama, por lo que no será antes de DOMReady. Probablemente sea seguro asumir que existirá el div de destino.– David Hedlund
5 de marzo de 2014 a las 7:54