One button runs a function, a second button runs a different function but only if the 1st function gets run

Question

I have 4 buttons assigned to run 4 different functions. Seen below

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

I have another function,functionFive, that is not controlled by any button.

All of these functions set parameters on a 3D object when the given button is clicked. Clicking button one runs functionOne, setting a specific set of parameters. If those parameters are set from functionOne and I click button four, I want functionFive to be run.

If those parameters from functionOne are not set when button four is clicked, I want functionFour to run.

To clarify, I only want this functionFive to run if functionOnehas already run and its parameters are set.

Can someone help me write this script? I've rewritten my question to fit my exact need. My original description was condensed to try and simplify it so it wouldn't be this long.

how will you find if a function is running unless it has return a value? — brk, Nov 01 '19 at 17:15
Need to be clearer: `If a function is true` VS `if functionOne has already run`, what do you mean. You want to `if(functionOne() == true) { functionThree(); }` or `if(functionOne has runnned before) { functionThree(); }` ? — Jonathan Larouche, Nov 01 '19 at 17:43

Alexanderbira · Answer 1 · 2019-11-01T19:09:41.560

0

Maybe make a new boolean variable that is false when it's defined, but set to true when functionOne is run and that determines which function buttonTwo runs.

<html>
<script>
    var oneClicked = false;

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

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

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

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

</html>

edited Nov 01 '19 at 19:09

answered Nov 01 '19 at 18:58

Alexanderbira

434
3
14

Yes, this is the right idea, but your example would be much better if you [did not use inline attribute event handlers in html](https://stackoverflow.com/q/6941483/1048572) – Bergi Nov 01 '19 at 20:33

score 0 · Accepted Answer · answered Nov 07 '19 at 16:32

Found the working solution to be....

var clicked = false;

function functionOne() {
 /functionOne parameters
 clicked = true;
 }

function functionTwo() {
clicked = false;
//functionTwo parameters
}

functionFour() {
if (clicked) {
cliked = false;
functionFive()
} else {
//functionFour parameters
  }
 }
}

One button runs a function, a second button runs a different function but only if the 1st function gets run

2 Answers2