Change text with Javascript

Question

Hello,

Someone could help me with a JS script to change the button text instantly ?

But change only when the status of the $x variable changes from 0 to 1, or when you click on the button containing the text.

Answer 1

The button label can be changed by clicking in this way:

<button class="meu-botao">Clique aqui</button>

<script>
    (function($){
        var $botao = $('.meu-botao');

        //Ao clicar no botao
        $botao.on('click', function(e) { 
            $botao.html("Botão clicado");
        });
    })(jQuery);
</script>

Changing the button label when a variable changes value, can be done with Proxy, but it is important that this variable is part of an object

<button class="meu-botao">Clique aqui</button>

<script>
    (function($){
        var $botao = $('.meu-botao');
        var $y = {valor: 0};
        var checarAlteracao = {
            set(obj, prop, valor) {
                var label = (valor > 0)? "Variável alterada": "Clique aqui";
                $botao.html(label);
                return Reflect.set(...arguments);
            }
        };

        //Altera no duplo clique do botão
        $botao.on('dblclick', function(e) {
            $x.valor++;
        });

        var $x = new Proxy($y, checarAlteracao);
    })(jQuery);
</script>