Responding to user activity can greatly enhance user experience and interactivity leading to improved engagement.Įvents vary according to element type, most are obvious but some not so. Assuming that's our our aim, and it certainly should be. As JavaScript developers, we're able to listen for these events using the JavaScript method for event listeners and then handle them with appropriate and well-timed responses. When these interactions occur, the elements themselves emit event actions. Xmlhttp.Visitors to our websites, and users of our applications, are continuously interacting with elements of the Document Object Module (DOM), whether they realise it or not. My Javascript (loaded as external js file, not in pug inline): var xmlhttp = new XMLHttpRequest()

'storyTitleImageLabel': 'trip to croatia', My approach with AJAX is probably completely wrong, and I have to get to the data in some other way. I want to use arrays and relative targeting to be able to add new templates without having to retarget in every new template. I could use 'getElementById' inside the function to write the json into an element, but then I have absolute targeting. I tried using global variables, but I could not make it work. The variables in my js code are limited to the scope of the function and cannot be used outside of it. Problems that I know of but can't find a solution to:

I'm new to frontend coding and try hard to wrap my head around these technologies. I'm using gulp to build the final output files. These templates are very basic, like replacing h1 and p strings or image paths. I want to write templates in pug, that are populated with data from an external json file.

I don't understand how to use json as a simple database for my templates.

Add event listener in pug template