CODEWITHSUNDEEP
javascripthtmlarraysdomweb-frontend
HackleSaw
HackleSaw

Reputation: 139

Passing and getting an array displayed as html text

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.

Upvotes: 0

Views: 659

Answers (1)

kennethreyt
kennethreyt

Reputation: 161

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>

Upvotes: 3

Related Questions