I have server side code which serves up a pug file, the pug file has variables parsed to it when rendered by my server side code.
I would like to be able to update that variable in pug when a check box is checked / unchecked.
my server side code:
// load the express module
const express = require('express');
const simpleVarDisplaySite = 'simpleVarDisplay.pug';
const app = express();
app.use(express.urlencoded({extended: false}))
app.use(express.static(__dirname+'/static'));
// simpleVarDisplaySite page
app.get('/', function (req, res) {
console.log(req.url);
let myHeading = 'Simple Pug Page';
let simpleObject = {
'date': {
'day': 'time'
}
}
res.render(simpleVarDisplaySite, {
heading: myHeading,
pugObject: simpleObject,
});
})
app.listen(8082)
my pug file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Pug</title>
<link rel="stylesheet" href="/styles/MainStyling.css">
<script src="/scripts/pugVarUpdater.js"></script>
</head>
<body>
<form method="POST">
<div>
<header>
<h1 class="HeaderEl" id="heading">#{ heading }</h1>
</header>
<div>
<input type="checkbox" id="simpleCheckBox" onchange="JavaScript:updatePugVarFunc()">
</div>
<br>
each valueDict, date in pugObject
<div>
<div>
<span>#{date}</span>
</div>
<br>
each time, day in valueDict
<div>
<span>#{day}</span>
</div>
<div>
<span>#{time}</span>
</div>
</div>
</div>
</form>
</body>
</html>
my client-side js when checkbox is checked / unchecked:
function updatePugVarFunc() {
const simpleVarDisplaySite = 'simpleVarDisplay.pug';
let newSimpleObject = {
'new_date': {
'new_day': 'new_time'
}
}
alert(newSimpleObject)
let myNewHeading = 'My New Simple Heading'
alert(myNewHeading)
document.body.innerHTML = simpleVarDisplaySite({
heading: myNewHeading,
pugObject: newSimpleObject,
});
}
I would like to have pug variable: pugObject updated when the checkbox is checked / unchecked onChange event, and see the updates in my browser, which I have tried with:
document.body.innerHTML = simpleVarDisplaySite({
heading: myNewHeading,
pugObject: newSimpleObject,
});
But that does not work.
I know that client-side is handled rather differently from server-side, but I am soo hoping that there is a solution to my specific problem.
Please note that I am a nood with javascript and pug, and I am very open to any and all suggestions to better achieve my goal.
My File structure:
server.js
views
simpleVarDisplay.pug
static
scripts
pugVarUpdater.js
PS: I have had a look at: use client-side js variable in pug And that did not help me.
Your assistance and guidance is much appreciated.
from update pug variable with client side javascript onchange event
No comments:
Post a Comment