Increasing a variable's value using onClick in javascript and displaying the new value in an HTML form

Question

I am coding a fan site for a game called League of Legends and my users who would like to create character assemblies should click on the skill icons and give it a point. (maximum 30 points)

Expected Example: http://www.solomid.net/masteries.php

You basically have 30 points. When you click on a skill image, it adds a point to that skill.

Since I'm new to JS and jQuery, I would like to ask:

• Currently, I can create a div and give it a warning onClick = ("I clicked."); "so he warns when someone clicks on a div. I need to update it a bit, let's say:

  1. The user clicks on the div (for example, let's say that the skill value is currently 0/4)
  2. 0 increases by 1, becomes 1/4.
  3. The user repeats this 3 times, gives the skills 4/4 points.
  4. This value should be sent to the PHP page, so it is saved in the form.
  How can i do this? Could you give an example of how this works in jQuery?

• As you can see, when you click on skills, it generates an int value after the hash line.

For instance; # 033200000000000000300000000000000000000000000000000

The value of this line, [skill1_value] [skill2_value] [skill3_value] ... [skillLast_value]

So, if you see such a value,

30001 (other 0)

This means that the user clicked 3 times on the "first skill", did not click on the next 3 skills. Once clicked the fifth skill.

Instead of publishing every form value for PHP, I will publish the integer value of the hash string. The rest of the calculations will be done using PHP.

Version TL, DR

• Imagine a 3x div. (div1, div2, div3)
• Imagine that each div contains the value of the visible number on the screen. (val1, val2, val3)
• By default, all values ​​are 0.
• If you click on div1, the value of val1 should be increased by 1. If you click on div2, the value of val2 should be increased by 1, etc.
• New values ​​should always be displayed in the HTML output. 6 When the user clicks “Save”, he must generate a line such as: (val1 + val2 + val3 ...) (for example, 716).

Any help is appreciated. I know this is a beginner, so links to articles will also be useful.

Answer 1

Here is an example with maximum values ​​and a limit on the number of points you must use.

http://jsfiddle.net/2Q2SS/2/

var remaining = 5; var MAX_VALUE = 4; $('.clickybox').click( function(el) { if (remaining == 0) return; var resBox = $(this).find('.result'); var curVal = resBox.attr('_data-value'); if (!curVal) curVal = 0; if (curVal >= MAX_VALUE) return; curVal++; remaining--; resBox.text(curVal + '/4'); resBox.attr('_data-value', curVal); alert($('.result').map(function() { var s = $(this).attr('_data-value'); if (s == undefined) s = '0'; return s; }).get().join('-')); }); 

EDIT: Updated for clarity.

Answer 2

Here is a working example: http://jsfiddle.net/THubm/4/

And the code:

 $(function(){ var numerators = $('.numerator'); $('.title').click(function(){ var numerator = $(this).next().children(); var newVal = +numerator.text() + 1; numerator.text(newVal); var hash = ''; numerators.each(function(){ hash += $(this).text(); }); alert(hash); }); }); 

Instead of explaining each part, let me know what questions you have.

Answer 3

During an onclick div event, the this keyword is bound to this div element by default, so you always know which div triggered the event. I assume you have a JavaScript object that collects values, so you can do something like this:

 onDivClick = function() { skillObj[this.id].value++; // Increments the stored value this.innerHTML = skillObj.getDisplayValue(this.id); // Updates the div text }; div1.onclick = onDivClick; div2.onclick = onDivClick; // Same function can be assigned to multiple divs 

The details may change in your implementation, but the general idea. The "Save" button can simply scroll through skillObj and create a line, and then you can send this line to the server.

I do not use jQuery, but I really don't need to do something like this. If you need specific jQuery help for this, you should consider a more specific question.

Hope this helps.

Answer 4

Store skill clicks in a hash or in a hidden field. It will start as a line of 000. Then you can increase the correct number depending on what the div pressed.

Somehow you will need to keep the mapping somewhere between divs (skills) and the location of numbers (index) in your hash string.

There is also a restriction only on the ability to have a skill level between 0..9, since you are limited to only one digit.