Click on a link and display the value within an input

Question

Click on a link and display the value within an input

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Hello, someone knows how I could do this, I have 10 links, each link corresponds to an element type link 1 = :D, link 2 = :S, link 3 = :$ and so on, so I have a input type="text" name="mensagem" placeholder="digite sua mensagem..."/> , my question is, how would I do it? when the person clicks on one of these links the value that is informed in them shows in the input? without being value="" , I will best exemplify <a href="javascript:void(0)">:D</a> <a href="javascript:void(0)">:S</a> <a href="javascript:void(0)">:$</a> by clicking on one of these link I want to send the value corresponding to the clicked link to input

javascript

asked by anonymous 13.03.2018 / 17:54

2 answers

1

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>

13.03.2018 / 18:28

How to work with fork of a project? How to work with release in git?

score 1 · Accepted Answer

Create a eventListener with click for each <a> , which when clicked, the corresponding text will be concatenated to the text of 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á!" />