JavaScript Tab
Last updated
Last updated
JavaScript is a scripting language that allows the user to interact with the elements of a web page, define logic for web content, and dynamically modify/update the contents of the web page.
Let's assume the following requirement:
Creating a paragraph element that displays the message "PLAYER 1: name", where name is a value set by the user upon clicking on the paragraph element.
This can be accomplished using the following HTML + CSS + JavaScript recipe:
The same can be reproduced on Ubidots by using the HTML Canvas Widget in the following way:
Use the following HTML code on the widget's HTML code editor tab:
Now, add the style to the paragraph on the widget's CSS tab:
Lastly, add the following code to the widget's JavaScript tab:
The following is the result on a Ubidots Dashboard:
| JavaScript code | Action |
|---|---|
const Paragraph = document.querySelector("p");
Selects a text paragraph and stores an instance of it on the Paragraph variable
function updateName()
{
const name = prompt("Enter a new name");
para.textContent = Player 1:
${name};
}
Defines a function block that can be invoked by calling updateName()
Paragraph.addEventListener("click", updateName);
Attaches an event listener to the Paragraph instance such that when the paragraph is clicked, the updateName function gets executed
const para = document.getElementById("player");
Gets a reference to the element with ID "player" from the DOM
