Pressing one button triggers a specific function, while pressing another button activates a separate function, but only if the first function has been successfully executed

I am seeking assistance with implementing a script that involves 4 different buttons, each assigned to run distinct functions. Here is the setup:

document.getElementById("buttonOne").addEventListener("click", functionOne);
document.getElementById("buttonTwo").addEventListener("click", functionTwo);
document.getElementById("buttonThree").addEventListener("click", functionThree);
document.getElementById("buttonFour").addEventListener("click", functionFour);

In addition, there is another function called functionFive that does not rely on any button for execution.

These functions manipulate parameters of a 3D object when their respective buttons are clicked. For instance, clicking button one triggers functionOne to set specific parameters. Furthermore, if the parameters from functionOne are already in place and I click button four, I want functionFive to be executed.

Conversely, if the parameters set by functionOne do not exist yet when button four is clicked, then I wish for functionFour to take action.

To make it clear, I only intend for functionFive to run after functionOne has completed its task and established the necessary parameters.

If anyone can assist me with scripting this scenario, I would greatly appreciate the help. I have revised my query to reflect my specific requirements, as my initial description was simplified for brevity.

Answer №1

One suggestion is to create a boolean variable initially set to false, and change it to true when functionOne is executed. This variable can then determine which function buttonTwo should trigger.

<html>
<script>
    var isClicked = false;

    function functionOne() {
        isClicked = true;
        alert('functionOne');
    }

    function functionTwo() {
        alert('functionTwo');
    }

    function functionThree() {
        alert('functionThree');
    }
</script>

<button onclick="functionOne()">button one</button>
<button onclick="if (isClicked) {functionThree()} else {functionTwo()}">button two</button>

</html>

Answer №2

Discovered the successful solution as...

let activated = false;

function activateFunction() {
  //parameters for activation function
  activated = true;
}

function deactivateFunction() {
  activated = false;
  //parameters for deactivation function
}

function executeFunction() {
  if (activated) {
    activated = false;
    executeAdditionalFunction();
  } else {
    //executeFunction parameters
  }
}

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

tips for incorporating jade Mixin in JavaScript

Experimenting with test mixins in jade language mixin test(testName) #test span Test String Desire to incorporate this functionality into javascript (as declared in the jade file) script(type='text/javascript'). $( document ).on( "cli ...

How can I display an ngx spinner after a delay of 1 second?

I am uncertain about the answer I came across on this platform. intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const time = 900; const spinnerLogic = () => { if (this.isRequestServed ...

Is it a breach of separation of concerns to validate using ng-pattern?

I have a requirement in Singapore to validate contact numbers entered by users. The number must start with 6, 8, or 9 and should have a total of 8 digits. I am currently utilizing ng-pattern on an input field with a regex solution, but I am concerned abo ...

Unlocking the secrets of obtaining post values using Body-parser in your Express Node.js application

Currently, I am utilizing Express version 4.11.1 and Body-parser version 1.11.0 in my project. However, upon running the code snippet below, I encountered the following output: I am seeking suggestions on how to retrieve the form value. Output {} serve ...

Dynamically update a dropdown menu with options based on the user's selection from a prior dropdown list using ajax and JSP Servlet

I am working on creating a real-time project for a consultancy and could use some assistance with developing a JSP page. Specifically, I need to allow the user to select a Client (Company name) from a dropdown list. Once a Client is selected, the HR list ...

Can you explain the concept of an anonymous block in JavaScript ES6 to me?

Recently, I came across an article on pragmatists which discussed some interesting ES6 features. However, one concept that caught my attention was the use of an anonymous block within a function. function f() { var x = 1 let y = 2 const z = 3 { ...

Create a compass application using React-Native

I am attempting to create a compass, but I am unsure how to utilize the Magnetometer data. Below is my Compass class: class Compass extends Component { constructor(props) { super(props); } componentWillMount(){ this._animeRotation = new Ani ...

What is the method for asynchronously loading a javascript file that includes an ajax call?

Within my JavaScript file named JScript.js, there is a function that includes an AJAX call to a dot-net page. alert('jscript.js called'); function AddTag() { var htag = document.getElementById("hdntag").value.split('|'); var texttag = ...

Using v-on:click to dynamically update multiple sections of content in a Vue.js and Liquid environment

Whenever I click on a button, I want the text and image to change. I attempted to do this but encountered difficulties in updating multiple elements simultaneously. {% for variant in product.variants %} <label for="variant_{{- variant.id }}"&g ...

Exporting Datatable to Excel may cause line breaks

I have structured my project in the following manner: https://jsfiddle.net/Eufragio/u342qgoz/1/ When I export to excel, I require a better layout or a more visible method to display my results $(document).ready( function () { var table = $('#exam ...

Import GraphQL data in gatsby-browser.js (or alternative method, if available)

I am currently facing a challenge with running a GraphQL query within the context of replaceRouterComponent in gatsby-browser.js (reference to Gatsby browser API). However, I am able to access data from Contentful. If there are alternative approaches or s ...

Creating a Dynamic Tree View Component in AngularJS Using JSON Data

I am new to AngularJS and I need help creating a TreeView Structure from a JSON Object. Here is an example of my Return JSON Object: var categoryTree = [{Name:'Item1', Childnodes : {}, id: 1}, {Name:'Item2', Childnod ...

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

Updating website links in real time with the power of jquery

Is there a way to dynamically change the parameter of a link? For example: Link1 Link2 Link3 By default, their URL is ?item=text, so link1 would be href="?item=link1", etc. But when I click on link1, the URLs of link2 and link3 should change to include ...

The setLanguage function in jsPDF does not support rendering different language characters

I'm currently working with jsPDF in Angular 2 and I'm experiencing an issue where my HTML content is not converting successfully into a PDF when it's written in Hebrew. Other languages seem to work fine, but Hebrew is causing a problem. How ...

What advantages could learning ReactJS first give me before diving into NextJS?

Just mastered TS and now faced with the decision of choosing a framework. I'm curious why it's recommended to learn ReactJS before NextJS. I've read countless articles advising this, but no one seems to delve into the reasons behind it. Ca ...

Utilizing highlight.js for seamless integration with vue2-editor (Quill)

I am having trouble connecting vue2-editor (based on quill) with highlight.js Despite my efforts, I keep encountering an error message that reads: Syntax module requires highlight.js. Please include the library on the page before Quill. I am using nu ...

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

We are incorporating scripts from various sources and domains, including one that contains the definition for jQuery.ajax function. Calls to jQuery.ajax are being made from different places and domains using relative URLs, such as jQuery.ajax("my/relativ ...

Iterating through List Items with callbacks in Kivy and KivyMD

In this section, I have a loop that iterates through keys and values from a JSON List. Although the KivyMD List view is currently displaying correctly, my goal is to print out the correct key instead of the last key from the JSON being printed. ScrollView ...

Resolve problems with implementing dynamic routes in Next.js

I have been learning about Next.js and I am struggling with understanding how to set up dynamic routing. I have the following setup: https://i.stack.imgur.com/uBPdm.png https://i.stack.imgur.com/YYSxn.png "use client" import React from "reac ...