Измените некоторые ссылки href на странице, используя Javascript

Question

Я хотел бы изменить каждую ссылку на моей странице, принадлежащую классу .btn_view

Мои ссылки на моей странице похожи на:

<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>
...

в

<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>
...

Я работаю над этим фрагментом кода, но не могу разобраться в проблемах:

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

Первая проблема заключается в том, что вы используете здесь селектор class:

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

. Это не приведет к тегам, имеющим class из btn_view.Вам понадобится:

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

или

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

Вторая проблема заключается в том, что, хотя getElementsByClassName возвращает массивоподобный объект с элементами DOM внутри, вы намерены определитьОбработчик событий для всех его items, но вместо того, чтобы назначать его для items, вы назначаете его контейнеру items.Итак:

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 2

Почему вы переходите на events, просто выполните цикл и измените его вот как.

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>

Answer 3

Если вы действительно хотите сделать это с помощью прослушивателя событий:

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>

Но я бы порекомендовал сделать так:

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>

В этом случае ссылки статичны, и вам не нужно обрабатывать событие