onClick fill in input

Question

I wanted to make a menu of options (Buttons) on my site, and when clicking on them is loaded a value to the input.

I tried to make a script that when clicking the button, the field below was filled with some value, but I had no success with it.

<script type="text/javascript">
$(document).ready(function () {
    $("#btnCorreioEletronico").on('click', function() {
    document.getElementById("RecursosTI").value == "Correio Eletronico";
}

The ideal is also that it was possible to separate each option with a comma, and that it was also possible to remove with a kind of Toggle.

Can someone help me with this?

Answer 1

See if that’s what you’re looking for:

$(document).ready(_ => {
    
    const added = [],
    input = document.getElementById("RecursoTI");

    $('button').on('click', ev => {
    
    const recurso = ev.currentTarget.innerText,    
    idx = added.indexOf(recurso);
    
    if (idx === -1) {added.push(recurso);}
    
    else {
    
        added.splice(idx, 1);
    
    }
    
    input.value = added.join(',');
    
    });
    
});

button {margin-right: 5px;}

input {display: block; margin: 10px 0; width: 100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Correio Eletrônico</button>
<button>Impressão</button>
<button>Note</button>
<button>Desktop</button>

<input type="text" id="RecursoTI" />