Comment on page
JavaScript Tab
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.
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 |
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:
<!DOCTYPE html>
<html>
<head>
<style>
p {
/* set the font family, size, and style */
font-family: "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
/* set the border, background, color, and box shadow */
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.6);
color: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
/* set the border radius and padding */
border-radius: 10px;
padding: 3px 10px;
/* set the display to inline-block and cursor to pointer */
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>
<script>
// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");
// add a click event listener to the <p> element
para.addEventListener("click", updateName);
function updateName() {
// prompt the user to enter a new name
const name = prompt("Enter a new name");
// update the text content of the <p> element
para.textContent = `Player 1: ${name}`;
};
</script>
</body>
</html>
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:
<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>
- Now, add the style to the paragraph on the widget's CSS tab:
p {
/* set the font family, size, and style */
font-family: "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
/* set the border, background, color, and box shadow */
border: 2px solid rgba(0, 0, 200, 0.6);
background: rgba(0, 0, 200, 0.6);
color: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
/* set the border radius and padding */
border-radius: 10px;
padding: 3px 10px;
/* set the display to inline-block and cursor to pointer */
display: inline-block;
cursor: pointer;
}
- Lastly, add the following code to the widget's JavaScript tab:
// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");
// add a click event listener to the <p> element
para.addEventListener("click", updateName);
function updateName()
{
// prompt the user to enter a new name
const name = prompt("Enter a new name");
// update the text content of the <p> element
para.textContent = `Player 1: ${name}`;
};
The following is the result on a Ubidots Dashboard:
Last modified 8mo ago