I have a blank object which I need to update on user action.
let userAction = {};
I have multiple buttons on page with unique ID's,
Like: Btn1, Btn2, whatever
So if as a user I will click Btn1 then my object should be updated with its id and number of click., Like this
userAction = {btn1: 1}
if I will click on bt2 then it would also update that object with its ID like this:
userAction = {btn1: 1, Btn2: 1 }
but if I will click any other button one more time then it should update the value by +1. Like this
So I click Btn1 again.. then object will look like this.
userAction = {btn1: 2, Btn2: 1 }
I tried to do it like this, just need to know is there any better or optimized option to do this.
let userAction = {};
$('button').click(function(){
let btnId = $(this).attr('id');
let exisitngValue = userAction[`${btnId}`];
if (btnId in userAction){
userAction[`${btnId}`] = exisitngValue+1;
}else {
userAction[`${btnId}`] = 1;
}
console.log(userAction);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<button id="whatever">whatever</button>Is there any better way to do it?
You could take just the id of the button directly without a template string and assign directly the value or zero and add one.
let userAction = {};
$('button').click(function(){
let btnId = $(this).attr('id');
userAction[btnId] = (userAction[btnId] || 0) + 1;
console.log(userAction);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<button id="whatever">whatever</button>let userAction = {};
$('button').click(function(){
let btnId = $(this).attr('id');
userAction[btnId]=userAction[btnId] ? userAction[btnId]+1 : 1;
console.log(userAction);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<button id="whatever">whatever</button>let userAction = {};
$('button').click(function(){
let btnId = $(this).attr('id');
userAction[btnId] = userAction[btnId]+1 || 1;
console.log(userAction);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<button id="whatever">whatever</button>