What steps can I take to modify an onclick function to incorporate multiple functions?

I need help modifying a button's onclick behavior to replace one function with two new functions. Here is the code I currently have:

    var random;

    function number(){
        var random =Math.floor(Math.random()*Math.floor(Math.random()*20))

    }

function show(){
    var display = document.getElementById('number').innerHTML= random;
}

function start(){
    var random =Math.floor(Math.random()*Math.floor(Math.random()*20))
    var button = document.getElementById('button').innerHTML="I give up!!";
    var change = document.getElementById("button").onclick = show; number;
}

Answer №1

Incorporate two event handlers into your button

function initiate(){
    var rand = Math.floor(Math.random()*Math.floor(Math.random()*20)),
        btn = document.getElementById('button').innerHTML="I surrender!!";
        alterBtn = document.getElementById("button");

    alterBtn.addEventListener('click', display);
    alterBtn.addEventListener('click', numeral);
}

Answer №2

Make sure to set onclick to an unnamed function that encapsulates both functions:

document.getElementById("button").onclick = () => {
    display();
    count(); 
};

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 can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...

Setting up Firebase in an Angular 6 project without using AngularFire

While working on a project, I initially set up Firebase using AngularFire but found that I didn't need to use many of its functions. Instead, I imported firebase/app in each service and directly used specific functions like firebase.auth() and firebas ...

Using PHP to send asynchronous requests to the server can greatly enhance

I have almost completed my project, but I am facing an issue with reading the data sent to the server. function main() { jQ(document).on("keyup", "form input", function () { var data = new FormData(); var value = jQ(this).val(); da ...

Encountering issues with MVC Razor's Cascading Dropdown Validation

Issue Overview: I have successfully implemented a cascading dropdown feature for Country and State using Jquery and Json. Everything is functioning as expected except for the validation aspect. When I open the view, if I click on the create button without ...

How to create dynamic options in a select dropdown based on the selection of another dropdown using HTML, JavaScript, or PHP

There are two dropdown menus here. <select name="firstdropdown" id="firstDropdown"> <option value="choiceOne">Choice One</option> <option value="choiceTwo">Choice Two</option> </select> <select name="seconddropdown ...

Ways to update Title label's CSS using JavaScript

These are my CSS rules: label[title="Hot"]{ display:none; } label[title="Cold"]{ display:none; } I am looking to convert this into JavaScript. Can you assist me with that? ...

Detecting Selected Radio Button Value Using Javascript

I am currently working on a project titled: Tennis Club Management utilizing javascript, HTML, CSS, and Bootstrap. In the project, one of the pages is managePlayers.html, which features two buttons - Add Players & Show Players. Clicking on the Add Play ...

In the world of React Redux, there is a peculiar issue where the "return" statement fails to function within a particular Redux Action function, specifically

Attempting to make updates to a customer's name using React-Redux can be a bit tricky. Below is the component code: import React, { useEffect, useState } from "react"; import { Link, Navigate, useParams } from 'react-router-dom'; i ...

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

How come my variable doesn't show up in the view even though I filled it in the controller?

I'm having trouble with my AngularJS setup. The angular.min.js file is located in the js folder, following a code example from O'Reilly's book. However, for some reason it is not working on my computer. //controller.js function HelloCont ...

Unable to reach redux actions through props while using react router

As someone who is new to working with React and Redux, I've been encountering an issue with accessing my Redux actions from the props when using them alongside React Router. Despite trying various configurations, the props only seem to contain the Rea ...

What could be the reason for the second selection not being chosen in a multi-select list?

When trying to select or deselect options in a multi-select using JavaScript, the code appears to be correct but encounters an issue when attempting to perform the same action multiple times. For example, if you try selecting Full-Time, click it again to ...

Having trouble transferring a file from a React frontend to an Express backend using Multer

When attempting the Post request in postman, sending the file to the destination poses no issues on the backend. However, an issue arises on the frontend and I'm unable to pinpoint the exact problem. While using react, the MulterError: Unexpected fiel ...

Retrieving dropdown options with the help of selenium and node.js

I'm looking to gather all the options from a dropdown menu and loop through them to submit a form. I need the list of values from the dropdown. The following Java code meets my requirements perfectly, but I am in need of the same functionality in Jav ...

Choosing various choices using AngularJS

My goal seems simple using vanilla JS, but with AngularJS, I'm looking for the best way to achieve it within the framework. I aim to update the selected options in a multiple select box without adding or removing any options. Below is a snippet of my ...

Utilize import and export statements to transfer an HTML tag between two JavaScript files

I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...

Obtain the breakpoint value from Bootstrap 5

We have recently updated our project from Bootstrap 4 to Bootstrap 5. I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with: window .getComputedStyle(document.documentElement) .g ...

What is the best method for retrieving objects from a Meteor collection?

I'm a beginner with Meteor and I'm currently working on the introductory tutorial. However, I'm facing difficulties in retrieving data from a collection. Below is my JavaScript code: import angular from 'angular'; import angularM ...

GridView in ASP.NET

I am currently working with a text box that is embedded within a gridview. My goal is to retrieve the ID of the textbox using JavaScript. However, when I try using '<%= txtNewQty.ClientID %>', it results in a compilation error. ...

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Is there a way to deactivate a button once clicked and substitute it with another button that performs a different task using AngularJS? Here is the button in question: <button type="submit" class="btn btn-small btn-default" ng-disabled="isteam==0 || ...