Modify some href links on a page using Javascript

Question

I would like to change every link on my page held by the class .btn_view

My links on my page are like :

<a class="btn_view" href="/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="/download/documentC.pdf">VIEW</a>
...

into

<a class="btn_view" href="viewer.html?file=/download/documentA.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentB.pdf">VIEW</a>
<a class="btn_view" href="viewer.html?file=/download/documentC.pdf">VIEW</a>
...

I am working on this piece of code, but I can't figure out the issues :

const items = document.getElementsByClassName(".btn_view");

items.addEventListener('click', (e) => {
  for (var i = 0; i < items.length; i++) //Loop through your elements
    {
        //Verify that the href starts with /download/
        if (items[i].href.indexOf("/download/") === 0)
        {
            // add viewer link in front of original url
            items[i].href = "viewer.html?file=" + items[i].href
            //If it does, open that URL in a new window.
            window.open(items[i].href, "_blank");
        }
    }
});

Answer 1

If you really want to do it using event listener :

 const items = document.getElementsByClassName("btn_view"); Array.from(items).forEach(item => item.addEventListener('click', (e) => { let href = item.href.replace(location.origin, ""); if(href.indexOf("/download/") === 0) { e.preventDefault(); window.open( "viewer.html?file=" + href, "_blank"); } })); 

 <a class="btn_view" href="/download/documentA.pdf">VIEW</a> <a class="btn_view" href="/download/documentB.pdf">VIEW</a> <a class="btn_view" href="/download/documentC.pdf">VIEW</a> 

But I would recommand to do like this :

 const items = document.getElementsByClassName("btn_view"); Array.from(items).forEach(item => { let href = item.href.replace(location.origin, ""); if(href.indexOf("/download/") === 0) { item.href = "viewer.html?file=" + href; } }); 

 <a class="btn_view" href="/download/documentA.pdf">VIEW</a> <a class="btn_view" href="/download/documentB.pdf">VIEW</a> <a class="btn_view" href="/download/documentC.pdf">VIEW</a> 

In this case links are static and you don't need to handle event

Answer 2

The first problem is that you use a class selector here:

const items = document.getElementsByClassName(".btn_view");

this will not yield the tags having the class of btn_view . You will need either:

const items = document.getElementsByClassName("btn_view");

or

const items = document.querySelectorAll(".btn_view");

The second problem is that even though getElementsByClassName returns an array-like object with DOM elements inside, you intend to define an event handler for all its items , but instead of assigning it to the items , you assign it to the container of the items . So:

for (var item of items) {
        //Verify that the href starts with /download/
        if (item.href.indexOf("/download/") === 0)
        {
            // add viewer link in front of original url
            item.href = "viewer.html?file=" + item.href
            //If it does, open that URL in a new window.
            window.open(item.href, "_blank");
        }
}

Answer 3

Why are you changing on events just loop through and change it here is how .

 function modifyLink(){ var items = document.getElementsByClassName("btn_view"); for(var i=0;i<items.length;i++){ let href = items[i].getAttribute("href"); console.log(href); items[i].setAttribute('href','viewer.html?file='+href); } for(var i=0;i<items.length;i++){ console.log(items[i].getAttribute("href")); } } modifyLink(); 

 <a class="btn_view" href="/download/documentA.pdf">VIEW</a> <a class="btn_view" href="/download/documentB.pdf">VIEW</a> <a class="btn_view" href="/download/documentC.pdf">VIEW</a>