JavaScript tab
JavaScript is a scripting language that lets users interact with web page elements, define page logic, and dynamically update content.
Examples
const Paragraph = document.querySelector("p");
Selects a paragraph element and stores a reference to it in the Paragraph variable
function updateName()
{
const name = prompt("Enter a new name");
para.textContent = Player 1:
${name};
}
Defines a function that can be called with updateName()
Paragraph.addEventListener("click", updateName);
Attaches a click event listener to the Paragraph element so the updateName function runs when the paragraph is clicked
const para = document.getElementById("player");
Gets a reference to the element with the ID "player" from the DOM
Advanced example #1
Assume the following requirement:
Create a paragraph element that displays the message "PLAYER 1: name", where name is a value set by the user when the paragraph element is clicked.
This can be accomplished with the following HTML + CSS + JavaScript example:
The same result can be reproduced in Ubidots by using the HTML Canvas widget as follows:
Add the following HTML to the widget's HTML tab:
Add the following styles to the widget's CSS tab:
Add the following code to the widget's JavaScript tab:
This is the result on a Ubidots dashboard:
Last updated
Was this helpful?