javascript - Why clicking the button is not giving a valid text in JS?

Question

I have 2 cards like the below.

  <div class="card" id="b1">
          <div class="card-header">
               <div class="card-title">
                 Sample card 1
               </div>
          </div>

          <div class="card-body">
             <div class = "content1"> </div>
             <div class = "content2"> </div>
             <div class = "content3"> </div>
          </div>
          <button class="button1">0</button>
      </div>

      <!-- card 2 -->
  <div class="card" id="b2">
          <div class="card-header">
               <div class="card-title">
                 Sample card 1
               </div>
          </div>

          <div class="card-body">
             <div class = "content1"> </div>
             <div class = "content2"> </div>
             <div class = "content3"> </div>
          </div>
          <button class="button1">0</button>
      </div>

Js :

var btnVal = [];
function buttonData(card.id) {
    btnVal[card.id] = ! btnVal[card.id] ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;
   switch(btnVal[card.id]) 
    {
     case 0:
      return {
       target: card.id,
       content1 : "Nice to code using Js",
       };
     case 1:
      return {
       target: card.id,
       content2 : "Nice to code using JQuery",
       };
      case 2:
       return {
       target: card.id,
       content1 : "Hello",
       content2 : "Greetings",
       };
       default:
         return {};
       }
  } 

function toaddtheText(card) {
    Callback(buttonData(card) , function (data) {
      bodyText(data)
    });
  }
 
function bodyText(data) {

if(data.content1) 
{
 var target = document.getElementById(data.target);
 var content = target.getElementsByClassName('content1')[0];
 content.innerHTML = data.content1;
}

if(data.content2) 
{
 var target = document.getElementById(data.target);
 var content = target.getElementsByClassName('content2')[0];
 content.innerHTML = data.content2;
}
 }
   
 $(document).on("click", ".button", function () {
   buttonData(b1);
});

When I click the button in a specific card for the first time, case 0 should be implemented, the next time, case1 and the next time case2 should be implemented.

But, If I click the button, it directly takes the case2 and not the case1.

The problem is, the data is taking only the content2 text for all the targets. The content1 text is ignored.

console.log(data) gives the following result.

object {
target: b1,
content2: "Nice to code using JQuery",
},
object {
target: b2,
content2: "Nice to code using JQuery",
},

Could someone please help?

Many thanks

Answer 1

Your first line of the buttonData function changes the value of btnVal[card.id] to 1 if the value is 0, so you never get the first case:

btnVal[card.id] = ! btnVal[card.id] ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;

In the above, your first ternary says if btnVal[card.id] is falsey (which 0 is) the set btnVal[card.id] to 1. After that you go through your switch case with btnVal[card.id] = 1.

Assuming that you're not expecting other falsey values, you can either remove this ternary completely, or else have btnVal[card.id] !== undefined rather than !btnVal[card.id].

[EDIT] You can replace the above line with:

btnVal[card.id] = btnVal[card.id] !== undefined ? 1 : btnVal[card.id] == 2 ? 0 : btnVal[card.id] + 1;

Or, if you are sure the functionality is correct then put this line at the end of the function, so you are only changing the value after you use it.

The full function then becomes:

function buttonData(card.id) {
  // store the current value of the card id if it exists, or zero.
  const value = btnVal[card.id] || 0;
  // increase the btnVal number 
  btnVal[card.id] = value > 1 ? 0 : value + 1;
  switch(btnVal[card.id]) {
    case 0:
      return {
        target: card.id,
        content1 : "Nice to code using Js",
      };
    case 1:
      return {
        target: card.id,
        content2 : "Nice to code using JQuery",
      };
    case 2:
      return {
        target: card.id,
        content1 : "Hello",
        content2 : "Greetings",
      };
    default:
      return {};
  }
}