One button for three or more actions when clicked












0














Short version: I need a button to carry out three seperate actions when clicked three times.



Long version: I have one page of my site where there is a little readable introduction with illustrations. I have a button that changes the first image to a second one when clicked once. When the user has finished reading the second image, clicking the same button then navigates to a different html location, using a multiclick function.



However, I need to add a third image to the introduction. I therefore need the button to change image1 to image2 on the first click, change image2 to image3 on the second click, then navigate to the next html location on the third click.



Is this possible? All of the multiclick solutions I've seen so far only cover two events. Or they use 'onclick', which I've been advised is bad practice. Can I modify the code I already have to add a third click action (maybe changing the value of calledonetime)? Or am I going in completely the wrong direction?



Working JS code for two actions:



<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});

var calledonetime = false;

function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>


The HTML:



<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>









share|improve this question




















  • 1




    Couldn't you just count the clicks? if(count === 1)...
    – j08691
    Nov 19 '18 at 16:36


















0














Short version: I need a button to carry out three seperate actions when clicked three times.



Long version: I have one page of my site where there is a little readable introduction with illustrations. I have a button that changes the first image to a second one when clicked once. When the user has finished reading the second image, clicking the same button then navigates to a different html location, using a multiclick function.



However, I need to add a third image to the introduction. I therefore need the button to change image1 to image2 on the first click, change image2 to image3 on the second click, then navigate to the next html location on the third click.



Is this possible? All of the multiclick solutions I've seen so far only cover two events. Or they use 'onclick', which I've been advised is bad practice. Can I modify the code I already have to add a third click action (maybe changing the value of calledonetime)? Or am I going in completely the wrong direction?



Working JS code for two actions:



<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});

var calledonetime = false;

function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>


The HTML:



<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>









share|improve this question




















  • 1




    Couldn't you just count the clicks? if(count === 1)...
    – j08691
    Nov 19 '18 at 16:36
















0












0








0







Short version: I need a button to carry out three seperate actions when clicked three times.



Long version: I have one page of my site where there is a little readable introduction with illustrations. I have a button that changes the first image to a second one when clicked once. When the user has finished reading the second image, clicking the same button then navigates to a different html location, using a multiclick function.



However, I need to add a third image to the introduction. I therefore need the button to change image1 to image2 on the first click, change image2 to image3 on the second click, then navigate to the next html location on the third click.



Is this possible? All of the multiclick solutions I've seen so far only cover two events. Or they use 'onclick', which I've been advised is bad practice. Can I modify the code I already have to add a third click action (maybe changing the value of calledonetime)? Or am I going in completely the wrong direction?



Working JS code for two actions:



<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});

var calledonetime = false;

function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>


The HTML:



<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>









share|improve this question















Short version: I need a button to carry out three seperate actions when clicked three times.



Long version: I have one page of my site where there is a little readable introduction with illustrations. I have a button that changes the first image to a second one when clicked once. When the user has finished reading the second image, clicking the same button then navigates to a different html location, using a multiclick function.



However, I need to add a third image to the introduction. I therefore need the button to change image1 to image2 on the first click, change image2 to image3 on the second click, then navigate to the next html location on the third click.



Is this possible? All of the multiclick solutions I've seen so far only cover two events. Or they use 'onclick', which I've been advised is bad practice. Can I modify the code I already have to add a third click action (maybe changing the value of calledonetime)? Or am I going in completely the wrong direction?



Working JS code for two actions:



<script>
jQuery(document).ready(function () {
$('#multiclick').click(function () {
multiclick();
});
});

var calledonetime = false;

function multiclick() {
if(calledonetime=== false) {
calledonetime = true;
var image = document.getElementById("infoscreentext");
image.src="infoscreentext2.png"; } /* action on first click */
else {
window.location.href = "castleview.html"; /* action on second click */
}
}
</script>


The HTML:



<body>
<div id="wrapper" div class="toshow">
<img src="infoscreenarrows.jpg" alt="Title" />
<img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
<input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>






javascript jquery html5 button






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 25 '18 at 0:18

























asked Nov 19 '18 at 16:33









Sudoku

287




287








  • 1




    Couldn't you just count the clicks? if(count === 1)...
    – j08691
    Nov 19 '18 at 16:36
















  • 1




    Couldn't you just count the clicks? if(count === 1)...
    – j08691
    Nov 19 '18 at 16:36










1




1




Couldn't you just count the clicks? if(count === 1)...
– j08691
Nov 19 '18 at 16:36






Couldn't you just count the clicks? if(count === 1)...
– j08691
Nov 19 '18 at 16:36














3 Answers
3






active

oldest

votes


















1














You can use a switch:



var clickCount = 0;

function clickHandler () {
clickCount += 1;
switch (clickCount) {
case 1:
// do action #1
break;
case 2:
// do action #2
break;
case 3:
// do action #3
break;
}
}


Or you can use an Array:



var clickCount = -1;
var actions = ;

function action1 (e) { /* prevent default, switch to image 1 */ }
function action2 (e) { /* prevent default, switch to image 2 */ }
function action3 () { /* follow hyperlink */ }

actions.push(action1);
actions.push(action2);
actions.push(action3);

function clickHandler (event) {
clickCount += 1;
actions[clickCount](event);
}





share|improve this answer





























    0














    I would say do it with three different clicks as below with css html and js






    <script>
    jQuery(document).ready(function () {
    $('#multiclick').click(function () {
    multiclick();
    });
    });

    var image1 = document.getElementById("infoscreentext");
    var image2 = document.getElementById("infoscreentext2");
    var image3 = document.getElementById("infoscreentext3");

    image1 && image1.addEventListener('click', () => {
    image1.classList.add('hide');
    image2.classList.remove('hide');
    });
    image2 && image2.addEventListener('click', () => {
    image2.classList.add('hide');
    image3.classList.remove('hide');
    });
    image3 && image3.addEventListener('click', () => {
    window.location.href = "castleview.html";
    });
    </script>

    .hide {
    display: none;
    }

    <body>
    <div id="wrapper" div class="toshow">
    <img src="infoscreenarrows.jpg" alt="Title" />
    <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
    <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
    <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
    </div>

    <div id="enterbutton">
    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
    </div>
    </body>








    share|improve this answer





























      0














      Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-



      <script>
      jQuery(document).ready(function () {
      $('#multiclick').click(function () {
      multiclick();
      });
      });

      var clickedCount = 0;

      function multiclick() {

      clickedCount++;

      if(clickedCount == 1) {
      var image = document.getElementById("infoscreentext");
      image.src="infoscreentext2.png"; /* change image on first click */
      var calledonetime[1];
      } /* add 1 count to calledonetime */
      else if(clickedCount == 2) {
      var image = document.getElementById("inforscreentext2");
      image.src="infoscreentext3.png"; } /* change image on second click */
      else {
      window.location.href = "castleview.html"; /* action on third click */
      }
      }
      </script>





      share|improve this answer





















        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379006%2fone-button-for-three-or-more-actions-when-clicked%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        1














        You can use a switch:



        var clickCount = 0;

        function clickHandler () {
        clickCount += 1;
        switch (clickCount) {
        case 1:
        // do action #1
        break;
        case 2:
        // do action #2
        break;
        case 3:
        // do action #3
        break;
        }
        }


        Or you can use an Array:



        var clickCount = -1;
        var actions = ;

        function action1 (e) { /* prevent default, switch to image 1 */ }
        function action2 (e) { /* prevent default, switch to image 2 */ }
        function action3 () { /* follow hyperlink */ }

        actions.push(action1);
        actions.push(action2);
        actions.push(action3);

        function clickHandler (event) {
        clickCount += 1;
        actions[clickCount](event);
        }





        share|improve this answer


























          1














          You can use a switch:



          var clickCount = 0;

          function clickHandler () {
          clickCount += 1;
          switch (clickCount) {
          case 1:
          // do action #1
          break;
          case 2:
          // do action #2
          break;
          case 3:
          // do action #3
          break;
          }
          }


          Or you can use an Array:



          var clickCount = -1;
          var actions = ;

          function action1 (e) { /* prevent default, switch to image 1 */ }
          function action2 (e) { /* prevent default, switch to image 2 */ }
          function action3 () { /* follow hyperlink */ }

          actions.push(action1);
          actions.push(action2);
          actions.push(action3);

          function clickHandler (event) {
          clickCount += 1;
          actions[clickCount](event);
          }





          share|improve this answer
























            1












            1








            1






            You can use a switch:



            var clickCount = 0;

            function clickHandler () {
            clickCount += 1;
            switch (clickCount) {
            case 1:
            // do action #1
            break;
            case 2:
            // do action #2
            break;
            case 3:
            // do action #3
            break;
            }
            }


            Or you can use an Array:



            var clickCount = -1;
            var actions = ;

            function action1 (e) { /* prevent default, switch to image 1 */ }
            function action2 (e) { /* prevent default, switch to image 2 */ }
            function action3 () { /* follow hyperlink */ }

            actions.push(action1);
            actions.push(action2);
            actions.push(action3);

            function clickHandler (event) {
            clickCount += 1;
            actions[clickCount](event);
            }





            share|improve this answer












            You can use a switch:



            var clickCount = 0;

            function clickHandler () {
            clickCount += 1;
            switch (clickCount) {
            case 1:
            // do action #1
            break;
            case 2:
            // do action #2
            break;
            case 3:
            // do action #3
            break;
            }
            }


            Or you can use an Array:



            var clickCount = -1;
            var actions = ;

            function action1 (e) { /* prevent default, switch to image 1 */ }
            function action2 (e) { /* prevent default, switch to image 2 */ }
            function action3 () { /* follow hyperlink */ }

            actions.push(action1);
            actions.push(action2);
            actions.push(action3);

            function clickHandler (event) {
            clickCount += 1;
            actions[clickCount](event);
            }






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 19 '18 at 16:51









            David

            46515




            46515

























                0














                I would say do it with three different clicks as below with css html and js






                <script>
                jQuery(document).ready(function () {
                $('#multiclick').click(function () {
                multiclick();
                });
                });

                var image1 = document.getElementById("infoscreentext");
                var image2 = document.getElementById("infoscreentext2");
                var image3 = document.getElementById("infoscreentext3");

                image1 && image1.addEventListener('click', () => {
                image1.classList.add('hide');
                image2.classList.remove('hide');
                });
                image2 && image2.addEventListener('click', () => {
                image2.classList.add('hide');
                image3.classList.remove('hide');
                });
                image3 && image3.addEventListener('click', () => {
                window.location.href = "castleview.html";
                });
                </script>

                .hide {
                display: none;
                }

                <body>
                <div id="wrapper" div class="toshow">
                <img src="infoscreenarrows.jpg" alt="Title" />
                <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                </div>

                <div id="enterbutton">
                <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                </div>
                </body>








                share|improve this answer


























                  0














                  I would say do it with three different clicks as below with css html and js






                  <script>
                  jQuery(document).ready(function () {
                  $('#multiclick').click(function () {
                  multiclick();
                  });
                  });

                  var image1 = document.getElementById("infoscreentext");
                  var image2 = document.getElementById("infoscreentext2");
                  var image3 = document.getElementById("infoscreentext3");

                  image1 && image1.addEventListener('click', () => {
                  image1.classList.add('hide');
                  image2.classList.remove('hide');
                  });
                  image2 && image2.addEventListener('click', () => {
                  image2.classList.add('hide');
                  image3.classList.remove('hide');
                  });
                  image3 && image3.addEventListener('click', () => {
                  window.location.href = "castleview.html";
                  });
                  </script>

                  .hide {
                  display: none;
                  }

                  <body>
                  <div id="wrapper" div class="toshow">
                  <img src="infoscreenarrows.jpg" alt="Title" />
                  <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                  <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                  <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                  </div>

                  <div id="enterbutton">
                  <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                  </div>
                  </body>








                  share|improve this answer
























                    0












                    0








                    0






                    I would say do it with three different clicks as below with css html and js






                    <script>
                    jQuery(document).ready(function () {
                    $('#multiclick').click(function () {
                    multiclick();
                    });
                    });

                    var image1 = document.getElementById("infoscreentext");
                    var image2 = document.getElementById("infoscreentext2");
                    var image3 = document.getElementById("infoscreentext3");

                    image1 && image1.addEventListener('click', () => {
                    image1.classList.add('hide');
                    image2.classList.remove('hide');
                    });
                    image2 && image2.addEventListener('click', () => {
                    image2.classList.add('hide');
                    image3.classList.remove('hide');
                    });
                    image3 && image3.addEventListener('click', () => {
                    window.location.href = "castleview.html";
                    });
                    </script>

                    .hide {
                    display: none;
                    }

                    <body>
                    <div id="wrapper" div class="toshow">
                    <img src="infoscreenarrows.jpg" alt="Title" />
                    <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                    <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                    <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                    </div>

                    <div id="enterbutton">
                    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                    </div>
                    </body>








                    share|improve this answer












                    I would say do it with three different clicks as below with css html and js






                    <script>
                    jQuery(document).ready(function () {
                    $('#multiclick').click(function () {
                    multiclick();
                    });
                    });

                    var image1 = document.getElementById("infoscreentext");
                    var image2 = document.getElementById("infoscreentext2");
                    var image3 = document.getElementById("infoscreentext3");

                    image1 && image1.addEventListener('click', () => {
                    image1.classList.add('hide');
                    image2.classList.remove('hide');
                    });
                    image2 && image2.addEventListener('click', () => {
                    image2.classList.add('hide');
                    image3.classList.remove('hide');
                    });
                    image3 && image3.addEventListener('click', () => {
                    window.location.href = "castleview.html";
                    });
                    </script>

                    .hide {
                    display: none;
                    }

                    <body>
                    <div id="wrapper" div class="toshow">
                    <img src="infoscreenarrows.jpg" alt="Title" />
                    <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                    <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                    <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                    </div>

                    <div id="enterbutton">
                    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                    </div>
                    </body>








                    <script>
                    jQuery(document).ready(function () {
                    $('#multiclick').click(function () {
                    multiclick();
                    });
                    });

                    var image1 = document.getElementById("infoscreentext");
                    var image2 = document.getElementById("infoscreentext2");
                    var image3 = document.getElementById("infoscreentext3");

                    image1 && image1.addEventListener('click', () => {
                    image1.classList.add('hide');
                    image2.classList.remove('hide');
                    });
                    image2 && image2.addEventListener('click', () => {
                    image2.classList.add('hide');
                    image3.classList.remove('hide');
                    });
                    image3 && image3.addEventListener('click', () => {
                    window.location.href = "castleview.html";
                    });
                    </script>

                    .hide {
                    display: none;
                    }

                    <body>
                    <div id="wrapper" div class="toshow">
                    <img src="infoscreenarrows.jpg" alt="Title" />
                    <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                    <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                    <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                    </div>

                    <div id="enterbutton">
                    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                    </div>
                    </body>





                    <script>
                    jQuery(document).ready(function () {
                    $('#multiclick').click(function () {
                    multiclick();
                    });
                    });

                    var image1 = document.getElementById("infoscreentext");
                    var image2 = document.getElementById("infoscreentext2");
                    var image3 = document.getElementById("infoscreentext3");

                    image1 && image1.addEventListener('click', () => {
                    image1.classList.add('hide');
                    image2.classList.remove('hide');
                    });
                    image2 && image2.addEventListener('click', () => {
                    image2.classList.add('hide');
                    image3.classList.remove('hide');
                    });
                    image3 && image3.addEventListener('click', () => {
                    window.location.href = "castleview.html";
                    });
                    </script>

                    .hide {
                    display: none;
                    }

                    <body>
                    <div id="wrapper" div class="toshow">
                    <img src="infoscreenarrows.jpg" alt="Title" />
                    <img src="infoscreentext.png" class="" id="infoscreentext" alt="" />
                    <img src="infoscreentext2.png" class="hide" id="infoscreentext2" alt="" />
                    <img src="infoscreentext3.png" class="hide" id="infoscreentext3" alt="" />
                    </div>

                    <div id="enterbutton">
                    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
                    </div>
                    </body>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 19 '18 at 16:46









                    samnu pel

                    677311




                    677311























                        0














                        Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-



                        <script>
                        jQuery(document).ready(function () {
                        $('#multiclick').click(function () {
                        multiclick();
                        });
                        });

                        var clickedCount = 0;

                        function multiclick() {

                        clickedCount++;

                        if(clickedCount == 1) {
                        var image = document.getElementById("infoscreentext");
                        image.src="infoscreentext2.png"; /* change image on first click */
                        var calledonetime[1];
                        } /* add 1 count to calledonetime */
                        else if(clickedCount == 2) {
                        var image = document.getElementById("inforscreentext2");
                        image.src="infoscreentext3.png"; } /* change image on second click */
                        else {
                        window.location.href = "castleview.html"; /* action on third click */
                        }
                        }
                        </script>





                        share|improve this answer


























                          0














                          Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-



                          <script>
                          jQuery(document).ready(function () {
                          $('#multiclick').click(function () {
                          multiclick();
                          });
                          });

                          var clickedCount = 0;

                          function multiclick() {

                          clickedCount++;

                          if(clickedCount == 1) {
                          var image = document.getElementById("infoscreentext");
                          image.src="infoscreentext2.png"; /* change image on first click */
                          var calledonetime[1];
                          } /* add 1 count to calledonetime */
                          else if(clickedCount == 2) {
                          var image = document.getElementById("inforscreentext2");
                          image.src="infoscreentext3.png"; } /* change image on second click */
                          else {
                          window.location.href = "castleview.html"; /* action on third click */
                          }
                          }
                          </script>





                          share|improve this answer
























                            0












                            0








                            0






                            Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-



                            <script>
                            jQuery(document).ready(function () {
                            $('#multiclick').click(function () {
                            multiclick();
                            });
                            });

                            var clickedCount = 0;

                            function multiclick() {

                            clickedCount++;

                            if(clickedCount == 1) {
                            var image = document.getElementById("infoscreentext");
                            image.src="infoscreentext2.png"; /* change image on first click */
                            var calledonetime[1];
                            } /* add 1 count to calledonetime */
                            else if(clickedCount == 2) {
                            var image = document.getElementById("inforscreentext2");
                            image.src="infoscreentext3.png"; } /* change image on second click */
                            else {
                            window.location.href = "castleview.html"; /* action on third click */
                            }
                            }
                            </script>





                            share|improve this answer












                            Yes this is possible and so easy but why do you use a boolean for that? I suggest using an Integer for that, so let's start:-



                            <script>
                            jQuery(document).ready(function () {
                            $('#multiclick').click(function () {
                            multiclick();
                            });
                            });

                            var clickedCount = 0;

                            function multiclick() {

                            clickedCount++;

                            if(clickedCount == 1) {
                            var image = document.getElementById("infoscreentext");
                            image.src="infoscreentext2.png"; /* change image on first click */
                            var calledonetime[1];
                            } /* add 1 count to calledonetime */
                            else if(clickedCount == 2) {
                            var image = document.getElementById("inforscreentext2");
                            image.src="infoscreentext3.png"; } /* change image on second click */
                            else {
                            window.location.href = "castleview.html"; /* action on third click */
                            }
                            }
                            </script>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 19 '18 at 16:48









                            Azhy

                            583113




                            583113






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.





                                Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                Please pay close attention to the following guidance:


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379006%2fone-button-for-three-or-more-actions-when-clicked%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                'app-layout' is not a known element: how to share Component with different Modules

                                android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

                                WPF add header to Image with URL pettitions [duplicate]