es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Parámetros en la plantilla Pug no disponibles para el evento onclick.

Tengo una plantilla pug llamada test.pug que tiene un botón. Cuando se hace clic en él, quiero que el botón llame a una función que utiliza parámetros pasados a la plantilla desde el punto final de renderizado. Aquí está la plantilla:

doctype html
html
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
script(type=”text/javascript”).
window.addEventListener(‘DOMContentLoaded’, function(){
document.getElementById(‘play-button’).addEventListener(‘click’, async () => {
console.log(testvar);
console.log(‘ready’);
});
}, false);
body
button(type=’button’ id=’play-button’) Click to play

Y aquí está el punto final que renderiza la plantilla pug:

const express = require(‘express’);
const router = express.Router();

/* GET home page. */
router.get(‘/’, function(req, res, next) {
res.render(‘test’,{
title:’Player’,
testvar:’testvar’
});
});

module.exports = router;

Pero cuando cargo la página y hago clic en el botón, obtengo este error:

Uncaught (in promise) ReferenceError: testvar is not defined
at HTMLButtonElement.

El código funciona correctamente si comento console.log(testvar), así que sé que el controlador de evento onclick se está agregando correctamente. Entonces aparentemente el controlador de evento se está agregando antes de que se pasen los parámetros a la plantilla.

¿Cómo puedo hacer que los parámetros sean accesibles para el evento onclick?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para hacer que los parámetros sean accesibles al evento onclick, se puede definir una variable global en la etiqueta script que contiene el escucha de eventos.

    Primero, se define la variable global en la parte superior de la etiqueta script:

    script(type="text/javascript").
        var testvar = "#{testvar}";
    

    Esto establecerá el valor de la variable global testvar con el valor pasado por la plantilla desde el punto final de renderizado.

    Luego, en el escucha de eventos, se puede acceder el valor de testvar:

    document.getElementById('play-button').addEventListener('click', async () => {
        console.log(testvar);
        console.log('listo');
    });
    

    Ahora, cuando se hace clic en el botón, el script podrá acceder al valor de testvar ya que fue definido globalmente en la etiqueta script.

Comments are closed.