1つのボタンを使用して2つのjs関数を1つずつ呼び出す

Question

ここに私のコードがあります。私は2つのjs関数を1つのsubmitボタンを使って呼び出したいと思います。あなたがこのアクションを処理する一つの関数を定義する必要があり

function scrollWin() { 
 

 
    // First time click 
 
    if (e.name != 'Click') { 
 
     e.name = "Click"; 
 

 
     function scrollWin() { 
 
      window.scrollBy(0, 85); 
 
     } 
 
    } 
 

 
    // When click it again.. 
 
    else if (e.name == 'Click') { 
 
     e.name = "Unclick"; 
 

 
     function myFunction() { 
 
      document.getElementById("demo").innerHTML = "<h2> Second Click </h2>"; 
 
     } 
 
    } 
 
}

<input type="button" onclick="scrollWin(); this.style.visibility= 'hidden'; 
 
myFunction()" value="Click Me" /> 
 

 
<p id="demo"></p>

Answer 1

。クリックの状態を保存できる変数を格納するのが最善の方法です。次に例を示します。

var clickCount = 0; 
 

 
function scrollWin(button) { 
 
    // first click 
 
    if (clickCount === 0) { 
 
     window.scrollBy(0, 85); 
 
    } 
 
    // second or more click 
 
    else { 
 
     document.getElementById("demo").innerHTML = "<h2> Second Click </h2>"; 
 
     button.style.display = 'none'; 
 
    } 
 
    clickCount++; 
 
}

<input type="button" onclick="scrollWin(this)" value="Click Me" /> 
 

 
<p id="demo"></p>

Answer 2

あなたはファンダメンタルズが権利を取得する必要があります。関数呼び出しには独自のスコープがあり、関数のスコープが終了すると変数は破棄されます。私はあなたが要素の2番目のクリックをキャプチャしたいと思う。

グローバル変数を宣言してはいけませんが、2回目のクリックでアクセスできる最初のクリック時に要素プロパティを設定してみてください。クリックしてそのプロパティを読んでから操作してください。

私は

onclick="click123(this);" 

とクリックイベントを呼び出し、私は、これはあなたが説明したものを実現考えるsetAttribute

Answer 3

を使用してプロパティを設定するためにこれを使用することができお勧めします。あなたはボタンをクリックしてボタンのテキストを読むのを渡す必要がありますが、e.nameはおそらくinnerHTMLまたはtextContentを使用する必要があります。次に、2回目のクリック後に変化するボタンのテキストに応じて、操作を実行したり、実行したい機能を呼び出すことができます。

  function scrollWin(e) { 
 

 
      //First time click 
 
      if(e.textContent != 'Click'){ 
 
       e.textContent = "Click"; 
 
       window.scrollBy(0, 85); 
 
      } 
 

 
      else if(e.textContent == 'Click'){ 
 
       e.textContent = "Unclick"; 
 
       document.getElementById("demo").innerHTML = "<h2> Second Click </h2>"; 
 
      }//end else 
 
     }//end function

<button onclick="scrollWin(this)">Click</button> 
 
<div id="demo"></div>

Answer 4

私はあなたが状態を維持して、それに応じたアクションを実行実行したい場合は、同じボタンに2つの異なる条件での2つの動作を実行したい理解してどのような。同様に：あなたは何か他のものにname属性を変更したい場合は

function scrollWin(e) { 
    var btn = e.target; 

    var state = btn.dataset.myattr; 

    if(state == 'state1'){ 
     btn.dataset.myattr = 'state2'; 
     e.name = "Click"; 
     window.scrollBy(0, 85); 
    }else if (state == 'state2'){ 
     btn.dataset.myattr = 'state1'; 
     e.name = "Unclick"; 
     document.getElementById("demo").innerHTML = "<h2> Second Click </h2>"; 
    } 
} 

あなたはそれを行うことができますし、そのためのJSコードを変更する必要はありません。