I have a HTML like the below,

 <input class="btn btn-primary" id ="b1" type="button" value="Blue">
 <input class="btn btn-primary" id ="b2" type="button" value="orange">
  <input class="btn btn-primary" id ="b3" type="button" value="green">

I don't want to take the value from the HTML. Like the below,

$(#b1).attr('value') or

var val = document.getElementById(ele.id).value;

Instead, I need the value from the JS.

The default Value for each button should be 0. When I click the button each time, default value. When it reaches 3, again it should move to 0.

Like,

default value  = default Value >= 3 ? 0 :   defaultValue

$("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  var def = [];
  def = def>=3 ? 0 :   def;
  switch(def) 
  {
  case 0:
   def = 5;
   break;
  case 1 :
   def = 4;
   break;
  default:
   def = 0;
}
}

But, I used switch case to get the default value.

This line def = def>=3 ? 0 : def;is executed before the switch.

So, It didnt work.

Can we implement in different ways other than switch to get the default value ?

I need to store the default value in the JS.

Could anyone please help?

Many thanks.

CodePudding user response：

Use the button's dataset to store the value.

$("button").click(function () {
    let currentValue = this.dataset.value || 0;
    if (  currentValue > 3) { currentValue = 0; }
    this.dataset.value = currentValue;
    ...
});

CodePudding user response：

Considering your button id as key to store count number

const container = document.getElementById("btn-container");

const btnValue = {};

container.addEventListener("click", function(e){
  // const v = e.target.value;
  if(e.target.tagName.toLowerCase() === "input"){
      const v = e.target.id;
      btnValue[v] = !btnValue[v] ? 1 : btnValue[v]==3 ? 0 : btnValue[v] 1;
  }

  console.log(btnValue);
});

<div id="btn-container">
 <input class="btn btn-primary" id ="b1" type="button" value="Blue">
 <input class="btn btn-primary" id ="b2" type="button" value="orange">
 <input class="btn btn-primary" id ="b3" type="button" value="green">
</div>