0

tengo un error a la hora de hacer click en un div,me da el siguiente error Es una pagina que al presionar un div debe decir presionado mas el nombre de la pelicula

SyntaxError: missing ) after argument list

les adjunto el código

firebase.initializeApp(firebaseConfig);

var db = firebase.firestore();

function Presionar(id) {
    console.log("Presionado "+id)
}

db.collection("Peliculas").onSnapshot((querySnapshot) => {
    document.getElementById('Contenedor').innerHTML = "";


    querySnapshot.forEach(function (doc) {
        var idpelicula = doc.id;
        var nombre = doc.data().Nombre_Pelicula;
        var genero = doc.data().Genero;
        var marca = doc.data().Marca;
        var vista = doc.data().Vista;
        var tipo = doc.data().Tipo;
        var endisco = doc.data().En_Disco;
        var poster = doc.data().Poster;

        document.getElementById('Contenedor').innerHTML +=

            `   
<div onclick="Presionar(${nombre})" style="width:100px;height:200px;border:2px blue dashed;float:right">
<img width="100px" height="200px" src="${poster}">
</div>
})
})
1
  • Hola cuando haces document.getElementById('Contenedor').innerHTML += debe de estar entre comillas asi document.getElementById('Contenedor').innerHTML += '<div></div>'
    – Jorge Luis
    el 27 feb. 2020 a las 19:52

1 respuesta 1

0

El contenido del div no es reconocido como una cadena, por tanto estás teniendo el error.

En casos como esto puedes usar las comillas invertidas para agrupar una cadena con comillas y nombres de variables incluidas entre ${}.

También, te recomiendo crear una sola referencia a los elementos del DOM, así evitas llamadas constantes a document.getElementById que es más costoso.

Por ejemplo:

//Dos variables sólo para prueba
var nombre="Lorem ipsum";
var poster="https://www.gstatic.com/webp/gallery/4.sm.jpg";
//Referencia al elemento
var elContenendor=document.getElementById('Contenedor');
//Trabajamos con variables para más claridad: NÓTESE que la cadena abre y cierra con `
var divData=`<div onclick="Presionar(${nombre})" style="width:100px;height:200px;border:2px blue dashed;float:right">
<img width="100px" height="200px" src="${poster}">
</div>`;
//Usamos la referencia antes creada
elContenendor.innerHTML += divData;
<div id="Contenedor"></div>

Una recomendación

Recomendaría también que evites poner funciones in line en los elementos HTML, como por ejemplo el onclick. Haciendo eso no hay independencia entre el código HTML y el código Javascript, lo cual dificulta el mantenimiento y el análisis del código. Si en un programa grande invocas esa función in line y un día dicha función tiene que evolucionar, tendrás que empezar a buscar todos los archivos con el HTML que la implementa (si son cientos o miles de archivos imagina el dolor de cabeza). Por eso es mejor asignar los onclick mediante listeners, en el código Javascript, liberando de ese modo el div de llamadas in line.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.