How to define two different function based on event click?

JS Fiddle: https://jsfiddle.net/k140nad9/6/

HTML Code below:

<input type="checkbox" id="btnA" onchange="openFunctionA();">
FUNCTION A
</input>
<input type="checkbox" id="btnB" onchange="openFunctionB();">
FUNCTION B
</input>

<div id="map">
MAP
</div>

And this JS Code:

var map = document.getElementById('map')
var btnA = document.getElementById('btnA')
var btnB = document.getElementById('btnB')

function openFunctionA() {
if($('#btnA').is(":checked")){
     $('#btnB').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION A")
    })
   } else {
    $('#btnB').attr('disabled', false)  
   }
}

function openFunctionB() {
 if($('#btnB').is(":checked")){
     $('#btnA').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION B")
    })
   } else {
    $('#btnA').attr('disabled', false)
   }
}

Click checkbox Function A to check it, but then dont click div map
Click again checkbox Function A to uncheck it, then click checkbox Function B
After poin 2, you will get popup "THIS FUNCTION A" first, instead popup "THIS FUNCTION B"

How to fix this, so when I click checkbox Function B (based on point 3 above), I get popup "THIS FUNCTION B" only.

You need to sign in to view this answers

Related Post