Implementing a JavaScript Function to Retrieve a Value When a Button is Clicked

<!DOCTYPE html>
<html>
<body>
<button id="one">Try it</button>
<h1>JavaScript Functions</h1>
<p id="demo"></p>
<script>
var x=document.getElementById("one").addEventListener("click", onefunction);
function onefunction(){
 //document.getElementById('demo').innerHTML=x;
 return 1;

 }

please review the code provided above.

//**enter code here**I want the value 1 to be returned to var x

Answer №1

Below is the solution you are looking for:

Here is the HTML portion:

<button id="one" onclick="onefunction()">Try it</button>
<p id="demo"></p>

And now the JS part:

function onefunction() {
  document.getElementById("demo").innerHTML = 1;
}

However, I must highlight that this coding method is not recommended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to set up objects with accessors and mutators in ES5 JavaScript?

creating a new object, obj1, with an enumerable property of value 42 > changing the value of obj1.property to 56 > output: 56 > accessing obj1.property returns: 42 When using use strict, an error occurs. To merge multiple objects: using jQuery ...

Unable to deploy the Firebase function to Firebase functions platform

I've been watching Doug's video on YouTube for guidance on changing a message with functions in JavaScript. To resolve the error message 'types can only be applied to ts files,' I installed the Flow language script. Thankfully, that err ...

Preventing the execution of JavaScript methods with the use of the button and POST method

Unraveling this mystery: <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> fails to trigger any action. The idea of placing the button inside the post crossed my mind, but alas, the page undergoes a refreshing episode ...

Ways to create a group label to modify various textboxes when a click event occurs

Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Is there a way to populate an observableArray in KnockoutJS using TypeScript? My ViewModel is defined as a class. In the absence of TypeScript, I would typically load the data using $.getJSON(); and then map it accordingly. function ViewModel() { var ...

Moving Cursor Automatically to the End Upon Rejecting Input

I have a form input where users can enter values. I need to validate the inputs to ensure they only contain numbers, dots, and commas. If the input is invalid, I want to prevent it from being stored in the input field. To achieve this, I have implemented ...

How can JSON be extracted from an input value using Javascript?

Having just embarked on learning about JSON, I find myself puzzled by the process of parsing JSON from an input value within my form. I'm attempting to convert the inputs into an array format like {"task" : "(input) ", "(input) "} {"description" : "( ...

Unable to execute internal functional tests due to this error: [POST http://localhost:4444/wd/hub/session] unable to connect - ECONNREFUSED

Currently working with node 0.12 and intern 3 in order to execute functional tests, but encountering the following error: SUITE ERROR Error: [POST http://localhost:4444/wd/hub/session] connect ECONNREFUSED at Server.createSession <node_m ...

The formControlName inside a loop causes issues with the functionality of Angular's custom-control-input

I am looking to customize the theme style on Angular, but the checkbox is not behaving correctly. The following code worked well for me: <tr *ngFor="let item of lists let i=index" [formGroupName]="i"> <td> <d ...

Is it possible to run two commands in npm scripts when the first command initiates a server?

When running npm scripts, I encountered an issue where the first command successfully starts a node server but prevents the execution of the second command. How can I ensure that both commands are executed successfully? package.json "scripts": { "dev ...

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

Display JSON data in a dynamic d3.js visualization

Using d3.js, I have created a chart that displays weekly scores when hovering over the months. To view the chart, click here: https://jsfiddle.net/qp7L1hob/1/ In my database, I maintain a table called Table pointsScored where I keep records of employee s ...

Set the ng-model attribute to "searchText" on an input within Angular JS, assigning it a value when a list item is clicked

Using angular.js (ng-model="searchText"), I have implemented a searchable list with an input field. When a list item is clicked, the content of the selected item can be displayed using {{selected | json}}. My goal is to set the value of the input to the se ...

How to align the navbar toggle button and list items to the right in Bootstrap 5

I'm struggling with a simple html page that has a fixed navbar at the top. Everything looks great when viewed in full-screen mode, with centered links. However, when the page size is reduced, it collapses to a toggle button on the left side. What I re ...

Having difficulty updating the login button name with ng-show function

Once a user logs in, I set a boolean value to true and intend to update the login button status to display "Logout". Despite attempting to use ng-show, the functionality does not seem to be working properly. App States: myApp.config(function ($stateProvi ...

Utilizing a wysiwyg text editor in conjunction with Angular 2

I am currently implementing a wysiwyg feature in my Angular2 project. When I include the code in the index.html page (the root page), it functions correctly. However, when I try to use it in a child view HTML file, the CSS and JavaScript do not load prope ...

Dynamic Routing in AngularJS based on Checkbox Selection

Currently, I am in the process of mastering Angular JS by working on an HTML Sample project. My goal is to create a user-friendly form where users can input basic information and select checkboxes to load different form pages using UI Routing. The page sho ...

What is the process for extracting a nested document from an array of documents in mongodb?

I am currently facing a challenge in my project where I need to remove a nested objects array within a document. The specific scenario involves searching for the days on which an event will be held, based on its event ID. const { eventid, typesOfTicketId ...

A pairing of two cells positioned to the left

Despite trying numerous solutions, I am unable to find a CSS fix for my issue. I'm working with a basic table that consists of rows with two columns. The table has a fixed width of 400px. Initially, the left column is aligned right, and the right col ...

What sets apart a class from a service in NativeScript?

I am embarking on the journey of learning Nativescript + Angular2, and while reading through the tutorial, I came across this interesting snippet: We’ll build this functionality as an Angular service, which is Angular’s mechanism for reusable classes ...