Why is addEventListener triggering twice?

Plugin builders
1

Hello, everyone! I am working on a simple plugin for my app. I’ve added the following code to the update function. It mostly works, but for some reason, the addEventListener is triggering twice.

1d5613ce60 (1)
1d5613ce60 (1)1245×66 10.5 KB

function(instance, properties, context) {
        function getLocal() {
        	const currentId = properties.currentid;
    	const qtyItem = localStorage.getItem(currentId);
        	instance.publishState('qty',qtyItem);
        }
        
        function plusItem() {
            const currentId = properties.currentid;
    	const qtyItem = localStorage.getItem(currentId);
        	localStorage.setItem(currentId,Number(qtyItem)+1);
        }
        
        function minusItem() {
     		const currentId = properties.currentid;
    		const qtyItem = localStorage.getItem(currentId);
        	if (qtyItem > 1) {
        		localStorage.setItem(currentId,Number(qtyItem)-1);
        	}
        }


        function increaseNumber() {
        	instance.triggerEvent('changeqty', function() {
       	 	plusItem();
        		getLocal();
    		});
        }
        
        function decreaseNumber() {
        	instance.triggerEvent('changeqty', function() {
       	 		minusItem();
        		getLocal();
    		});
        }
        
        getLocal();
        
        const buttonPlusElement = document.getElementById(`btnPlus${properties.btnindex}`);
    	buttonPlusElement.addEventListener('click', function() { console.log('test')});
        
        const buttonMinusElement = document.getElementById(`btnMinus${properties.btnindex}`);
    	buttonMinusElement.addEventListener('click', decreaseNumber);
    }

I managed to resolve my issue by adding Plugin Actions that perform the same tasks as the plusItem and minusItem functions. However, I’m still puzzled by the strange behavior of the addEventListener. Has anyone else encountered such an issue?

2

update gets called multiple times, if you want to do something just once inside the update function you need to keep track of it, for example storing a boolean in the data object of the instance.

1 Like
3

This is not a strange behavior! Although if you’re not familiar with the plug-in editor it can be confusing at first.

If you read the update function documentation you’ll find that the code inside update runs every time the plug-in element updates. This means every time a field changes, the update function runs. On every page load, the update function runs twice (can’t answer as to why…) but in general, everything in update function needs to be structured in a way that expects itself to be ran multiple times. This means you will probably have to use iteration variables which are initialized inside the initialize function. I.e…

INITIALIZE:

instance.data.i = 0

UPDATE:

if(instance.data.i ===0){
…Run code here…
}
instance.data.i++

END

That’s how you’re going to want to do things. BTW your event listener should probably just exist in initialize. But this structure I lay out here will be required for any other code you want to run only one time

Cheers

4 Likes
4

That’s wonderful and really helpful! Thank you very much!

2 Likes