Multiple Buttons to insert text into input

Question

I am attempting to have a button with a search value for our most common searches. What I was trying to do is user clicks button and inserts the text WITH the quotes "Some Text".

Right now this is what I am using for a single button. How would I make this so I can use one script with multiple buttons?

  <button onclick="searchText()" data-product-name="iPhone 12 Pro">iPhone 12 Pro Max</button> <----Current Button

<button onclick="searchText()" data-product-name="Pixel 5">Pixel</button> <---- Added for what Id like
<button onclick="searchText()" data-product-name="LG">LG</button><---- Added for what Id like
<button onclick="searchText()" data-product-name="Samsung S20 Plus">Samsung S20 Plus</button><---- Added for what Id like

  <script>
  var i = 0;
  var txt = '"iPhone 12 Pro Max"';
  var speed = 50;

  function searchText() {
    if (i < txt.length) {
      document.getElementById("search-query").value += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  }
  </script>

I tried adding the following but did not work.

var txt = element.getAttribute('data-product-name');

topdev87 · Accepted Answer · 2020-11-06 20:22:14Z

1

var i = 0;
var txt = '"iPhone 12 Pro Max"';
var speed = 50;
var elements = document.querySelectorAll('button')
for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function() {
    var txt = this.getAttribute('data-product-name');
    console.log(txt);
  });
}

<button data-product-name="iPhone 12 Pro">iPhone 12 Pro Max</button>
<button data-product-name="Pixel 5">Pixel</button>
<button data-product-name="LG">LG</button>
<button data-product-name="Samsung S20 Plus">Samsung S20 Plus</button>

answered Nov 6, 2020 at 20:22

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akeempositive · Accepted Answer · 2020-11-06 20:21:36Z

0

You can pass the id of the button to the searchText. and read the text using jquery or plain js

   <!--html --->
   <button onclick="searchText('buttonOne')" id= "buttonOne" data-product-name="Samsung S20 Plus">Samsung S20 Plus</button><---- Added for what Id like

   // javascript
   function(buttonId){
        var text = document.getElementById(buttonId).innerHTML
        // process the text with your business logic here
   }

answered Nov 6, 2020 at 20:21

akeempositive

675 bronze badges

Collectives™ on Stack Overflow

Multiple Buttons to insert text into input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related