I am developing a web map. This map should include two tools (layerswipe and layerspy) for the user to explore differences between two overlayed layers.

My goal is to create two radio buttons where one of the tool gets activated when the corresponding radio button is selected.

The radio buttons:

<div class="toolbar-centered">
        <input type="radio" id="swipelayer" name = "mainfunction" onclick="mainfunx()" > Swipe
        <input type="radio" id="layerspy" name = "mainfunction" onclick="mainfunx()"> Layer spy
</div>

My javascript function to change between the two tools (tools are defined as swipefunction() and spyfunction()):

function mainfunx() {
 var s = document.getElementById('swipelayer').checked,
     p = document.getElementById('layerspy').checked;
 if (s) swipefunction()
 if (p) spyfunction()
}

Once I change my selection on the radio buttons, the tools do not get deactivated. Instead both are activated at the same time. I am very new to Javascript and do not really have a clue how to make sure that the other function is deactivated while the other is activated.