I am trying to show the order at which buttons are clicked. For example I have the html

<button id="one" class="name">Hello</button>
<button id="two" class="name">Hello1</button>
<button id="three" class="name">Hello2</button>
<button id="four" class="name">Hello3</button>
<button id="five" class="name">Hello4</button>

If I click any button for the first time, for example let's say third one with id="three", then it should show "1" on top of button. If I click it again it should say 1&2 and then if I clicked another button then that button should say 3 as it is clicked at 3rd position. So the whole thing is I am trying to show the position at which they are clicked and if they are clicked multiple times then show at which numbers they are clicked and join the numbers with "&". PS: I am new to jquery/javascript so I am not able to figure out where to start to get the desired result.

CodePudding user response：

$(function() {
 var click = 0;
$("button.name").click(function(){
  var current = $(this).text();
  var existingClicks = current.split(" ");
  if(existingClicks.length > 1) {
    $(this).text(current " &" (  click))
  }
  else {
    $(this).text("clicked = " (  click))
  }
})
});

I think this code will do what you want to do without much editing in your HTML side. But I would suggest you to use better classnames for the elements.

CodePudding user response：

I can't figure out why you want to separate numbers with '&' but its easy.

var btn1Clicks = 0;
var btn2Clicks = 0;
var btn3Clicks = 0;

var btn1 = document.getElementById('one');
var btn2 = document.getElementById('two');
var btn3 = document.getElementById('three');

btn1.addEventListener('click',btnClick);
btn2.addEventListener('click',btnClick);
btn3.addEventListener('click',btnClick);

function btnClick(e){
  let btnclk = 0;
  if (e.target == btn1 || e.target.parentNode == btn1){
    btnclk = btn1Clicks   1;
    btn1Clicks   ;
  }
  else if(e.target == btn2 || e.target.parentNode == btn2) {
    btnclk = btn2Clicks   1;
    btn2Clicks   ;
  }
  else{
    btnclk = btn3Clicks   1;
    btn3Clicks   ;
  }
    
  let s = e.target.getElementsByTagName('div')[0] || e.target;
  
  let str = s.innerText;
  if (str === '' && btnclk == 1){
    str = '1'
  }else{
    str  = `&${btnclk}`;
  }
  
  s.innerText = str;
}

.name{
  position: relative;
  padding: 20px;
  background: #1122a9;
  color: white;
  width: 160px;
  margin: 15px;
}

.txt{
  position: absolute;
  top: 0;
  left: 0;
  color: #eee;
}

<button id="one" class="name">Hello <div id="txt"></div></button>
<button id="two" class="name">Hello1 <div id="txt"></div></button>
<button id="three" class="name">Hello2 <div id="txt"></div></button>

CodePudding user response：

Here is the code with pure Javascript. No additional library required. You can run and try it on the snippet below. The steps can be described here:

1. Set the counter variable and assign it to 0

2. Get all the buttons elements.

3. For each button, add the event listener and the mechanism of count text and the counter:

   • If the button had not been clicked yet, then add clicked = and the current state of counter.
   • Otherwise, just add the ampersand & and the current counter state.

var click = 0;
var buttons = document.querySelectorAll('button.name');
buttons.forEach(button => {
  button.addEventListener('click', function(){
    var current = button.innerText;
    var existingClicks = current.split(" ");
    if(existingClicks.length > 1) {
      button.innerText  = ` & ${  click}`;
    }
    else {
      button.innerText = `clicked = ${  click}`;
    }
  });
});

<button id="one" class="name">Hello</button>
<button id="two" class="name">Hello1</button>
<button id="three" class="name">Hello2</button>
<button id="four" class="name">Hello3</button>
<button id="five" class="name">Hello4</button>