2つの異なるjavascript関数onclickを実行する

Question

私は2つのjavascript関数を持っています。私は別のものを試しましたが、ただ一つしか働かせず、もう一つしか働かないのです。ボタン上でstartTimer onclick関数を実行しましたが、テキストが表示されている最初のメソッドの実行方法はわかりません。

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> 

Answer 1

あなたはむしろHTMLでonclick属性を使用するよりも、jQueryを介して、このボタンをトリガーする必要があります。

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

を、あなたがボタンをクリックしたときに実行の両方の機能を持っているでしょう：

たとえば、あなたがこれを行うことができます。

Answer 2

クリックして正確に何をしたいのかを管理する機能が必要です。私は2つの関数を呼び出すためのラッパー関数を作成します。

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

それからちょうどあなたのHTMLを変更します。

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

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

Answer 3

あなたはちょうどこのように、クリックハンドラ内から希望の二つの機能を呼び出すことができます。

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

あなたが考えてもよいでしょう関数名についてもう少し詳しく述べますが、それは一般的な構造です。