# 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: ```html

Player 1: Chris

```

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: ```html

Player 1: Chris

``` * Add the following styles to the widget's CSS tab: ```css 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; } ``` * Add the following code to the widget's JavaScript tab: ```javascript // get a reference to the

element using its ID const para = document.getElementById("player-name"); // add a click event listener to the

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

element para.textContent = `Player 1: ${name}`; }; ``` This is the result on a Ubidots dashboard:

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://dev.ubidots.com/dashboards-and-widgets/html-canvas/code-editor/javascript-tab.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.