This playground can write document.body.innerHTML. Log clicks too.
Goal
Show a Nairobi heading and count clicks in the console.
document.body.innerHTML = "<h1>Nairobi kiosk</h1>";
console.log(document.querySelector("h1").textContent);document.body.innerHTML = '<p id="out">ready</p><button id="btn">Sell</button>';
let n = 0;
document.getElementById("btn").onclick = () => {
n += 1;
document.getElementById("out").textContent = "units " + n;
console.log("units", n);
};
console.log("click Sell");document.body.innerHTML = "<ul id=\"list\"></ul>";
for (const city of ["Nairobi", "Mombasa"]) {
const li = document.createElement("li");
li.textContent = city;
document.getElementById("list").append(li);
}
console.log(document.querySelectorAll("li").length);console.log(typeof document.body.innerHTML);