How do I direct a html page using <a> but in javascript?

Question

<div class="service-cap">
    <h4><a  class="injury" id="blackeye">Black Eye Injury</a></h4>
    <p>Level:<br>- Mild<br>- Serious</p>
</div>
<div class="service-cap">
     <h4><a class="injury" id="blisters">Blisters</a></h4>
     <p>Level:<br>- Mild<br>- Moderate<br>- Serious</p>
</div>

Note: I want to use class="injury" to get all of the id and assign each of it to specified link based on the id in javascript as below but it's not working.

"use strict";

const init = function (e){
    let btn = document.querySelectorAll("#injury");

    btn[0].addEventListener('click',function() {
        window.document.location="./blackeye.html";
    });
    
    btn[1].addEventListener('click',function() {
        window.document.location="./blisters.html";
    });
};

document.addEventListener('DOMContentLoaded',function() {
    init();
});

Answer 1

1. Get all divs with classname "service-cap"

2. Wait for user clic

3. On user clic redirect to https://www.example.com/

    let divs = document.getElementsByClassName("service-cap"); let div = divs[0]; div.addEventListener("click",function() { window.location.replace("https://www.example.com"); });

seem to be only part of the answer for you, please precise what you want to do.

Answer 2

Here is a first way of doing it:

• get all links with the class injury
• assign event listeners to each element in which we navigate to the page corresponding to the id of each element

window.onload = function () {
        var items = document.getElementsByClassName("injury");
        console.log(items);

        for (var i = 0; i < items.length; i++) {
          var id = items[i].id;

          items[i].addEventListener("click", function () {
            window.location.assign(`${id}.html`);
          });

          //or we add the href attribute from javascript

          // items[i].setAttribute("href",`./${id}.html`);
        }
      };

Hope this helped:-)