Javascript counter with if else

Using JavaScript with Hype
1

Hi everyone,
This is javascript counter and toggleshowhide an object.

var clicks = 0; function onClick() { clicks += 1; if (clicks > 0) { clicks = clicks + 2; } document.getElementById("clicks").innerHTML = clicks; }; ------------------------- function toggleshow() { var element = hypeDocument.getElementById('text1'); if(element.style.display == 'block') element.style.display = 'none'; else element.style.display = 'block'; } ================ it will run toggleshow(); when click on the button onclick(); every 3 times. I tried on hype but not work. any other idea?countandshow.hype.zip (15.6 KB)
2

Hi chans!

Your Hype document scripting & the example shown in your post above are different. In your Hype document You call the toggleshow() function from inside the onClick() function in the “Head HTML” script, but not so in your example posted above… (i.e. your intentions are not clear to me):

Hype document’s scripting (snippet):

document.getElementById("clicks").innerHTML = clicks;
toggleshow();

In your HypeDocument, or your script in your post above, I see nothing that would conditionally trigger the _toggleshow()_ ƒ every third click as You indicated: > it will run toggleshow(); when click on the button onclick(); every 3 times.

Maybe I have misunderstood this statement or your intentions.

Why not just include the toggling in your _“onClick”_ƒ as in your Hype document? (Only we don’t call the function, here we simply write it out.)

Hype Demo: countandshow_JHSv1.hype.zip (15.3 KB)

The following script works with the “text1” field’s visibility toggling - not every three clicks - but rather on every click as You have written it previously:

<script>
	var clicks = 0;

function onClick() {
    clicks += 1;
    if (clicks > 0) {
        clicks = clicks + 2;
    }
    
    document.getElementById("clicks").innerHTML = clicks;
    
    var element = document.getElementById('text1');
	if(element.style.display == 'block'){
        element.style.display = 'none';}
	else{
        element.style.display = 'block';}
}
 </script>

**_Please Note: I'm back "deep in the weeds" tomorrow on - and will not have time for follow up. Hopefully someone else will be available if You have additional questions - or if I have misinterpreted your request._**
1 Like
3

Thanks JimScott !
But it shows and hide text1 on every click.
I dont know the way to show and hide when I click every 3 times.

4

Hi chans!
I have only a short bit of time. The following idea is off the top of my head and I will not be able to test in Hype or polish the code if necessary.

Divide the “clicks” variable by 3. If the remainder = 0 then we have a way to track a click every “third” time using modulus division

Click here for more info on modulus division. But the modulus operation yields the integer remainder of one number divided by another.

1 % 3 != 0
2 % 3 != 0
3 % 3 = 0 …this will register as a “third” click.
4 % 3 != 0
5 % 3 != 0
6 % 3 = 0 …this will register as a “third” click.
etc.

I do not understand the logic of how You originally envisioned the onClick conditional - as You wrote it always adds up to a multiple of three. I do not know what other uses this code might be used for. So I am rewriting things assuming there is only one use for this script.

The following script assumes the “text1” field starts out hidden; so on click “3” it will show and on click “6” it will hide again, etc. If this is not what You desired then You will need to adjust the code.

<script>
var clicks = 0;
	
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
    
    var thirdClick = clicks % 3;
    if (thirdClick == 0) {
    var toggleText1 = document.getElementById('text1');
       if(toggleText1.style.display == 'block'){
        toggleText1.style.display = 'none';}
	else{
        toggleText1.style.display = 'block';}
    }
    
}
 </script>
5

Maybe I am also misunderstanding…

but this should work.

   <script>
	var clicks = 0;

function onClick() {
    clicks++; // add 1 to click count
        
    document.getElementById("clicks").innerHTML = clicks;
    
    var element = document.getElementById('text1');
    
    
    if (  clicks  < 3){ 
    element.style.display = 'none';
       
        }else{
        clicks = 0 // click count is 3 or above reset   click count to 0
         element.style.display = 'block';
        }
    }
 </script>
6

Jim’s code looks tidier :stuck_out_tongue:

Joking aside. There are many ways to do this. I think though that the original post mentions a “counter” and also displays the clicks. I’m wondering if (s)he needs the click count to keep increasing in which Jim’s way would accomplish that.

However, I iterate that the message in the first instance is unclear and without any more information (or an example document) it is difficult to be clear as to what solutions you need.

7

Could be..
But a simple change using @JimScott's mod idea

   <script>
        	var clicks =  0;

        function onClick() {
            clicks++; // add 1 to click count
                
            document.getElementById("clicks").innerHTML = clicks;
            
            var element = document.getElementById('text1');
            
            
            if (  clicks % 3){ 
            element.style.display = 'none';
               
                }else{
                
                 element.style.display = 'block';
                }
            }
         </script>
1 Like
8

simple refactoring! indeed.

9

Thanks JimScott, MarkHunte, DBear
This code works perfectly.

Thanks MarkHunte but your code not work extractly I want.
Thanks Dbear but I love JimScott’s Code.
JimScott, You saved my day. Thank you so much.

2 Likes