Olá, alguém sabe como eu poderia fazer isso, tenho 10 link, cada link corresponde a um elemento tipo link 1 = :D, link 2 = :S, link 3 = :$
e assim por diante, ai eu tenho um input type="text" name="mensagem" placeholder="digite sua mensagem..."/>
, minha dúvida é o seguinte, como eu faria pra quando a pessoa clicasse em um desses link o valor que é informado neles mostrasse no input? sem ser pelo value=""
, vou exemplificar melhor <a href="javascript:void(0)">:D</a> <a href="javascript:void(0)">:S</a> <a href="javascript:void(0)">:$</a>
ao clicar em um desses link quero que envie o valor correspondente ai link clicado para o input
Adicione um comentário
|
3 Respostas
Crie um eventListener
com click
para cada <a>
, que ao ser clicado, o texto correspondente será concatenado ao texto do input
:
document.addEventListener("DOMContentLoaded", function(){
var els = document.body.querySelectorAll("a[href*='java']");
for(var x=0; x<els.length; x++){
els[x].addEventListener("click", function(){
var a_txt = this.textContent,
inpt = document.body.querySelector("#texto");
inpt.value += " "+a_txt;
});
}
});
<a href="javascript:void(0)">:D</a>
<a href="javascript:void(0)">:S</a>
<a href="javascript:void(0)">:$</a>
<br />
<input id="texto" type="text" value="olá!" />
const
//O input
input = document.getElementById('input'),
//Listener de quando clica
clickListener = function(){
input.value += this.innerText;
};
document
//a's filhos de .links-texto
.querySelectorAll( '.links-texto a' )
.forEach( function( e ){
//e = <a>
e.addEventListener( 'click', clickListener );
});
<input id="input" type="text" />
<section class="links-texto">
<a href="#">:D</a>
<a href="#">:$</a>
<a href="#">:)</a>
</section>
document.addEventListener("DOMContentLoaded", function(){
var els = document.body.querySelectorAll("a[href*='java']");
for(var x=0; x<els.length; x++){
els[x].addEventListener("click", function(){
var a_txt = this.textContent,
inpt = document.body.querySelector("#texto");
inpt.value += " "+a_txt;
});
}
});
<a href="javascript:void(0)">:D</a>
<a href="javascript:void(0)">:S</a>
<a href="javascript:void(0)">:$</a>
<br />
<input id="texto" type="text" value="olá!" />