JavaScript tab

JavaScript is a scripting language that lets users interact with web page elements, define page logic, and dynamically update content.

Examples

JavaScript code
Action

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?