Onclick calls function 2 times after changing value in browser developer mode

Question

Follows the code:

<button onclick="myFunction(1)">Meu botão</button>

<script>
function myFunction(num) {
    alert(num);
}
</script>

Jsfiddle: https://jsfiddle.net/43mt9og8/

Anyone can change value using F12.

Change number myFunction(1) for myFunction(2), and then click button, call the javascript function 2 times.

Each time you change the number, you record it somewhere. (If it changes 50 times, it will call the function 50 times)

There is way before calling the function, check how many numbers recorded ?

Answer 1

I think what you want to do is stop the spread right, that’s what I understood.

https://stackoverflow.com/questions/38569422/how-to-stop-event-propagation-on-onclick-event-in-html-attribute

example:

<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">

in your case would look like this:

<button onclick="(function(e) { e.preventDefault(); e.stopPropagation(); myFunction(1); })">Meu botão</button>

<script>
function myFunction(num) {
    alert(num);
}
</script>

Answer 2

Hello, if your concern is that users do not change your javascript code, you will need a code like the one below. And if possible separate the javascript file from the html file.

<button id="btnId">Meu botão</button>
<script>
    function myFunction(num) {
        alert(num);
    }
    document.getElementById('btnId').onclick = function(){
        myFunction(47);
    };
</script>