JavaScriptを使ってonlickを別の関数で実行させることはできますか？

Question

私はそれらの1つを作る必要がありますクラスのための赤いボタンのゲームを押していないと基本的に私は赤いボタンの上にテキストを表示する必要があります。問題は、赤いボタンを一度押すだけでなく、動作させることに問題があることです。私は、クリックカウンターを作成し、それをif-elseステートメントの基礎として使用することを考えていました。たとえば、（clicks == 0）の場合、IDTのButtonTextを「Press me！」にする必要があります。クリック数= 1で、テキストを「ハイ」にしたいクリック数= 2で、私は「こんにちは」になりたい誰かが私を助けてくれますか？わかりますように、私はまだこれに新しいです。私と一緒に抱きしめてください。前もって感謝します！ここまでは、これまでcssと仮説if else文を含めています。

var clicks = 0; 
 
\t function myFunction() { 
 
     clicks += 1; 
 
     document.getElementById("counter").innerHTML = clicks; 
 

 
    }; 
 
\t 
 
\t /*function Function(){ 
 
\t if(clicks == 0){ 
 
\t document.getElementById("ButtonText").innerHTML = "Press Me!"} 
 
\t if else(clicks == 1){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hi"} 
 
\t else(clicks == 2){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hello."} 
 
    } */

\t div{ 
 
\t font: Arial; 
 
\t position: fixed; 
 
\t margin: 13% 0 0 38%; 
 
\t font-size: 58px; 
 
\t color: white; 
 
\t width: 380px; 
 
\t height: 480px; 
 
\t border: 0px black transparent; 
 
\t cursor: pointer; 
 
\t } 
 

 
\t p{ 
 
\t cursor: pointer; 
 
\t display: block;} 
 

 
\t #button { 
 
\t display: block; 
 
\t width: 665px; 
 
\t height: 665px; 
 
\t background: url(Images/Unpressed.jpg) no-repeat top; 
 
\t cursor: pointer; 
 
\t margin-left: 30%; 
 
\t margin-top: 10%; 
 
\t } 
 
\t 
 
\t #button:active { 
 
\t background: url(Images/Pressed.jpg) no-repeat bottom; 
 
\t }

\t <p>Clicks: <p id="counter">0</p></p> 
 
\t <div id="container" onclick="myFunction()"><p id="ButtonText">Press Me!</p></div> 
 
\t <a id="button" onClick="myFunction()"></a>

Answer 1

次のことを試してみてください。

剰余を使用して

<script> 
var clicks = 0; 
var myFunction = function() { 
    if(clicks == 0) return false // not sure if you would want to return false here, it would prevent the increment of clicks  
    if(clicks%2==0){ 
    document.getElementById("elementToChange").innerHTML = "new value"; 
    } else { 
     alert('hello'); 
    } 
    clicks += 1; 
    document.getElementById("counter").innerHTML = clicks; 
    }; 
    </script> 


<div>Clicks: <p id="counter">0</p></div> 


<input type="button" id="container" onClick="myFunction();" value="clickme1"/> 

（％）演算子は、あなたのタスク

はそれで周りを再生達成し、何を参照するために、コンソールを使用します。クリックするたびにJSが実行する

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

Answer 2

あなたは近くです。あなたのJavaScriptにいくつかの構文エラーがあります。 if else()は無効で、else if()である必要があります。 F12は、ブラウザコンソールでこれらのようなエラーを表示します。また、コードの可読性を高めるために、括弧やインデントがどこにあるかにも注意してください。

とは別に、イベントリスナーを使用してクリック値をチェックする関数を呼び出すだけです。このような何かが働くだろう：

var clicks = 0; 
function myFunction() { 
    clicks += 1; 
    document.getElementById("counter").innerHTML = clicks; 

}; 

function foo(){ 
    myFunction(); 
    if(clicks == 0){ 
     document.getElementById("ButtonText").innerHTML = "Press Me!"; 
    } else if (clicks == 1) { 
     document.getElementById("ButtonText").innerHTML = "Hi"; 
    } else if (clicks == 2) { 
     document.getElementById("ButtonText").innerHTML = "Hello."; 
    } else { 
     //more than 3 clicks 
    } 

} 

//add an event listener to your button 
document.getElementById('ButtonText').addEventListener('click',foo); 

をここでは、JSフィドルの例である：https://jsfiddle.net/igor_9000/bbtawaff/

希望に役立ちます。

Answer 3

var clicks = 0; 
 
    var clicks = 0; 
 
    
 
\t function myFunction() { 
 

 
     clicks += 1; 
 
     var greetings= ["hi","hello","Press Me!"]; 
 
     document.getElementById("counter").innerHTML = clicks; 
 
     document.getElementById("ButtonText").innerHTML = greetings[clicks % greetings.length]; 
 

 
    }; 
 

 

 

 
\t 
 
\t /*function Function(){ 
 
\t if(clicks == 0){ 
 
\t document.getElementById("ButtonText").innerHTML = "Press Me!"} 
 
\t if else(clicks == 1){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hi"} 
 
\t else(clicks == 2){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hello."} 
 
    } */

\t div{ 
 
\t font: Arial; 
 
\t position: fixed; 
 
\t margin: 13% 0 0 38%; 
 
\t font-size: 58px; 
 
\t color: white; 
 
\t width: 380px; 
 
\t height: 480px; 
 
\t border: 0px black transparent; 
 
\t cursor: pointer; 
 
\t } 
 

 
\t p{ 
 
\t cursor: pointer; 
 
\t display: block;} 
 

 
\t #button { 
 
\t display: block; 
 
\t width: 665px; 
 
\t height: 665px; 
 
\t background: url(Images/Unpressed.jpg) no-repeat top; 
 
\t cursor: pointer; 
 
\t margin-left: 30%; 
 
\t margin-top: 10%; 
 
\t } 
 
\t 
 
\t #button:active { 
 
\t background: url(Images/Pressed.jpg) no-repeat bottom; 
 
\t }

\t <p>Clicks: <p id="counter">0</p></p> 
 
\t <div id="container" onclick="myFunction()"><p id="ButtonText">Press Me!</p></div> 
 
\t <a id="button" onClick="myFunction()"></a>

var clicks = 0; 
 
\t function myFunction() { 
 
     clicks += 1; 
 
     document.getElementById("counter").innerHTML = clicks; 
 

 
    }; 
 
\t 
 
\t /*function Function(){ 
 
\t if(clicks == 0){ 
 
\t document.getElementById("ButtonText").innerHTML = "Press Me!"} 
 
\t if else(clicks == 1){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hi"} 
 
\t else(clicks == 2){ 
 
\t document.getElementById("ButtonText").innerHTML = "Hello."} 
 
    } */

\t div{ 
 
\t font: Arial; 
 
\t position: fixed; 
 
\t margin: 13% 0 0 38%; 
 
\t font-size: 58px; 
 
\t color: white; 
 
\t width: 380px; 
 
\t height: 480px; 
 
\t border: 0px black transparent; 
 
\t cursor: pointer; 
 
\t } 
 

 
\t p{ 
 
\t cursor: pointer; 
 
\t display: block;} 
 

 
\t #button { 
 
\t display: block; 
 
\t width: 665px; 
 
\t height: 665px; 
 
\t background: url(Images/Unpressed.jpg) no-repeat top; 
 
\t cursor: pointer; 
 
\t margin-left: 30%; 
 
\t margin-top: 10%; 
 
\t } 
 
\t 
 
\t #button:active { 
 
\t background: url(Images/Pressed.jpg) no-repeat bottom; 
 
\t }

\t <p>Clicks: <p id="counter">0</p></p> 
 
\t <div id="container" onclick="myFunction()"><p id="ButtonText">Press Me!</p></div> 
 
\t <a id="button" onClick="myFunction()"></a>

Answer 4

他あまりにも多くの可能な答えがあるようhttps://jsfiddle.net/coolbhes/7yhkfqq9/

var clicks = 0; 
    function myFunction() { 
     clicks += 1; 
     var greetings= ["hi","hello","Press Me!","add As many you like..."]; 
     document.getElementById("counter").innerHTML = clicks; 
     document.getElementById("ButtonText").innerHTML = greetings[clicks % greetings.length]; 

    }; 

document.getElementById('ButtonText').addEventListener('click',myFunction);