First thing you should do is get the reference of the elements that will work.
Within the javascript to obtain the object reference html whose attributes ids are defined can be used document.getElementById()
which returns the element reference through its attribute ID
.
The next step is to define a event handler who will be responsible for each click of a radio button send the value of the element attribute, whose event was triggered, to the <textarea>
using your property to do so Node.innerText
which will be filled by the property Event.target
which is the reference to the object that sent the event.
And finally the events are installed in the respective element using Element.addEventListener()
that records an event wait in an element.
To start the code with the <textarea>
properly filled was simulated a click through the method EventTarget.dispatchEvent()
using a MouseEvent
//Cria as referências aos elementos HTML usádos no código.
let msg = document.getElementById("msg");
let rad1 = document.getElementById("optionsRadios1");
let rad2 = document.getElementById("optionsRadios2");
let rad3 = document.getElementById("optionsRadios3");
//Define a função cujo a finalidade é manipular os eventos click
function radioClick(e){
//Substitui o texto de msg pelo conteúdo do atributo value do elemento que gerou o evento.
msg.innerText = e.target.value;
}
//Instala o evento click para o handler radioClick em cada um dos radio buttons.
rad1.addEventListener(`click`, radioClick);
rad2.addEventListener(`click`, radioClick);
rad3.addEventListener(`click`, radioClick);
//Envia um click para rad1.
rad1.dispatchEvent(new MouseEvent('click'));
<div class="form-group col-xs-12">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios1" value='Sem contato' checked>
<span style="color: red">Sem contato</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios2" value='Pendente'>
<span style="color: #E9D62B">Pendente</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="status" id="optionsRadios3" value='Com contato'>
<span style="color: green">Com contato</span>
</label>
</div>
</div>
<textarea name="msg" required class="form-control" id="msg" placeholder="Descreva como foi o atendimento"></textarea>
</div>