Count on click code

[nielse63]

I am looking to add a function to my site where a user is able to click on a line of text, and the number next to that text will go up by one. I would prefer it if the user was limited to one click, but that's not entirely necessary. For two examples of something similar to what I'm requesting help for, check out

http://www.fmylife.com

or

http://www.textsfromlastnight.com

(below each submission there is a "good" and "bad" counter that the user is able to click).

Thanks for the help, I really appreciate it.

 

[vacunita]

That's a pretty simple matter using Javascript. however, you need to determine where you'll store the information otherwise every time the page is requested the number will be reset to 0 and I doubt that's what you want.

Anyway, for starters this should get you what you need to the display:

<script type="text/javascript">
function add_to_mycounter(){
var mycounter=document.getElementById('mycounter');
var cstore = document.getElementById('counter_store');

cstore.value=parseInt(cstore.value)+1;
mycounter.innerHTML=cstore.value;
}
</script>

<a href="javascript:add_to_mycounter();">Add</a><input type="hidden" name="counter_store" id="counter_store" value='0'><span id="mycounter">0</span>

I added the hidden input in case you want to submit the form so you can store the value and retrieve it next time he page is requested. you'll need to store it somewhere on the server. a DB or even a file if you need to.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[nielse63]

thanks a ton, i really appreciate it. if i can get a few more specifics from you possibly i would appreciate it (i'm new to javascript).

Where would I insert this code specifically? There a few places I would like to see this happen specifically.

--and--

I'm assuming that I need to specifically designate the names of several of those functions. Which pieces/parts of code do I need to change, and which ones should I just leave alone?

 

[vacunita]

The part between <script> tags should be placed between he header tags in your page.

And the other part should be where you want the link and number displayed.

If you want to be able to use it in more than one place on a single page there will need to be some modifications.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[nielse63]

i'm assuming then to store the count in a file, the file will have to be a page on my site, and i would modify the "document" text. and that if I wanted to make separate counts on a line or on a page, i would modify the "mycounter" and "counter_score" functions? am I close?

 

[vacunita]

i'm assuming then to store the count in a file, the file will have to be a page on my site,

Not necessarily, it can be, but it can also just be a text file, as long as its on the server and can be accessed.

and that if I wanted to make separate counts on a line or on a page, i would modify the "mycounter" and "counter_score" functions? am I close?

mycounter and counter_score are variables not functions.

There is only one function in that code, the add_to_mycounter() function.

If you wanted more than one counter you would need to make the first 2 lines respond to parameters passed to the function. Like this:

function add_to_mycounter([red]txtline[/red],[blue]hidden_input[/blue]){
var mycounter=document.getElementById([red]txtline[/red]);
var cstore = document.getElementById([blue]hidden_input[/blue]);
...
}



And then give each of the different counters a different ID:
And pass those ID's to the function.

<a href="javascript:add_to_mycounter('[green]counter_store[/green]','[yellow]mycounter[/yellow]');">Add</a><input type="hidden" name="counter_store" id="[green]counter_store[/green]" value='0'><span id="[yellow]mycounter[/yellow]">0</span>


<a href="javascript:add_to_mycounter('[purple]counter_store2[/purple]','[COLOR=#ff7405]mycounter2[/color]');">Add</a><input type="hidden" name="counter_store2" id="[purple]counter_store2[/purple]" value='0'><span id="[COLOR=#ff7405]mycounter2[/color]">0</span>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[nielse63]

Awesome, i really appreciate your help on this. How would I input and recall the data though? I've searched this like crazy and gone through a ton of books, and I can't really find anything that points me in the right direction.

 

[vacunita]

You would need to submit the form that holds the values you want to store and use a server side language (PHP,ASP, Coldfusion) to do it.

Depending on what server side language is available to you will be how you do this.

forum434
forum333
forum232


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[nielse63]

any clues on how to disable it from being clicked multiple times?