Passing and getting an array displayed as html text

Question

I'm passing an array of strings to be displayed as html text inside a

my_arr = ["PRODUCT", "SHAMPOO1", "SHAMPOO2", "SHAMPOO3", "SHAMPOO1"]

which is displayed as :

PRODUCT, SHAMPOO1, SHAMPOO2, SHAMPOO3, SHAMPOO1.

What I want to do is make these clickable. And when I click on one of these words I want that word to be displayed below it.

What's the cleanest way to do this? Passing the array in the <a> tag isn't working for me.

Just passed the array like this : document.getElementById("products").innerHTML + '<a>' + my_arr + '</a>' — HackleSaw
– HackleSaw, Commented Aug 4, 2020 at 7:55
Why you want display that word, when you click that word not hover on that word? You may looking for tooltip or title. — Transamunos
– Transamunos, Commented Aug 4, 2020 at 8:52

kennethreyt · Accepted Answer · 2020-08-04 08:02:18Z

3

you can add it to the DOM, then loop your array to the li under ul

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <div id="products"></div>
  <body>
    <script>
      var my_arr = ["PRODUCT", "SHAMPOO1", "SHAMPOO2", "SHAMPOO3", "SHAMPOO1"];
      var str = "<ul>";

      my_arr.forEach(function (product) {
        str += "<li> <a href='/'>" + product + "</a> </li>";
      });

      str += "</ul>";
      document.getElementById("products").innerHTML = str;
    </script>
  </body>
</html>

answered Aug 4, 2020 at 8:02

kennethreyt

1612 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Passing and getting an array displayed as html text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related