Run two different javascript functions onclick

Question

I have two javascript functions and I want them both to run when I press a button. I have tried different things but only one would work and not the other. I ran the function startTimer onclick on the button but don't know how to run the first one where the text is displayed.

JS:

$(function () {
  count = 0;
  wordsArray = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5"];
  setInterval(function () {
    count++;
    $(".questions1").fadeOut(400, function () {
      $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
    });
  }, 8000);
});


     function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 8000);
          }

          var images = [], x = -1;
          images[0] = "img/question-2.png";
          images[1] = "img/question-3.png";
          images[2] = "img/question-4.png";
          images[3] = "img/question-5.png";
          images[4] = "img/question-6.png";

HTML

<img id="img" src="img/question-1.png" alt="">
<h1 class="questions1">Text 1</h1>

<button id="begin" onclick = "startTimer()">Begin</button>

@Jonasw does that work like that? I would've thought onclick="startTimer();displayNextImage()" — Danmoreng
– Danmoreng, Commented May 8, 2017 at 15:54

Wakeuphate · Accepted Answer · 2017-05-08 15:44:45Z

4

You should trigger this button via jQuery rather than using an onclick attribute in HTML.

For example you could do this:

$('#begin').on('click', function(){
  firstFunction();
  secondFunction();
});

And you would have both functions executed when you click the button.

answered May 8, 2017 at 15:44

Wakeuphate

5033 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andrea Over a year ago

I tried this but the text still runs before clicking a button, and the images don't change.

Donny Bridgen · Accepted Answer · 2017-05-08 15:45:42Z

1

You need a function to manage what exactly you want to happen onclick. I would create a wrapper function to call the two functions.

    function onClickWrapper(){ 
       //Do onclick stuff 
       startTimer(); 
       otherFunction();
    }

Then just modify your HTML:

<img id="img" src="img/question-1.png" alt="">
<h1 class="questions1">Text 1</h1>

<button id="begin" onclick = "onClickWrapper()">Begin</button>

answered May 8, 2017 at 15:45

Donny Bridgen

1696 bronze badges

Comments

CaptainMarvel · Accepted Answer · 2017-05-08 15:46:38Z

0

You can just call the two functions you want from within the click handler, like this:

function onClick(){
    startTimer();
    otherFunction();
}

You may want to think about function names some more, but that's the general structure.

answered May 8, 2017 at 15:46

CaptainMarvel

4376 silver badges19 bronze badges

Collectives™ on Stack Overflow

Run two different javascript functions onclick

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related