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?
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:
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
: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.