Параметр URL продолжает добавляться, если я продолжаю нажимать на страницу

#javascript #html

#javascript #HTML

Вопрос:

Мой код в основном добавляет:
amp;lang=en
или
amp;lang=fr
к URL-адресу, в зависимости от того, на какую страницу я нажимаю.

Моя проблема в том, что параметр URL продолжает добавляться, если я продолжаю нажимать на страницу.
Например, если я нажимаю на «английскую» страницу только один раз, это происходит:
http://example.com/english/amp;lang=en (что хорошо),
однако, когда я нажимаю на «английскую» страницу во второй раз, это происходит:
http://example.com/english/amp;lang=enamp;lang=en (что плохо).
Это должно быть так:
http://example.com/english/amp;lang=en

Еще один важный пример:
когда я нажимаю на «английскую» страницу, это происходит:
http://example.com/english/amp;lang=en (что хорошо)
Затем, когда я перехожу на страницу «Франция» (после того, как я посетил страницу «Английский»), это происходит:
http://example.com/english/amp;lang=enamp;lang=fr (что плохо).
Это должно быть так:
http://example.com/english/amp;lang=fr

 document.getElementById("eng").addEventListener("click", function (e) {
    var href = e.target.getAttribute("href");
    if(href) {
        location.href = href   "amp;lang=en";
        e.preventDefault();
    }
});

document.getElementById("fr").addEventListener("click", function (e) {
    var href = e.target.getAttribute("href");
    if(href) {
        location.href = href   "amp;lang=fr";
        e.preventDefault();
    }
});

 <li><a id="eng" href="http://example.com/english/">English</a></li>
<li><a id="fr" href="http://example.com/france/">France</a></li>

Развернуть фрагмент

Каков наилучший способ решить эту проблему? Спасибо!

1. Вы могли бы попробовать добавить это: if(href.includes("amp;lang=fr")){ location.href = href - "amp;lang=fr" "amp;lang=en" } и соответствующий аналог при попытке перехода на другой язык.

2. Вероятно, вы ищете прослушиватель событий с опцией once. Нашел для этого ссылку в интернете: dev.to/cilly_boloe/addeventlistener-once-js-bits-565d

Ответ №1:

Это из-за этой строки кода:

 location.href = href   "amp;lang=en";

href в этом случае возвращает amp;lang=en .
Приведенная выше строка кода добавляет к существующему значению href и перенаправляет страницу на этот адрес.

Вместо этого он должен просто устанавливать значение, а не увеличивать его.

1. Как именно я это сделаю? Я не хочу очищать все после «Имени страницы» в URL и добавлять amp;lang после него. Я хочу сохранить весь URL-адрес без изменений, при этом добавляя только ОДИН экземпляр amp;lang поверх него.

2. Я бы порекомендовал вам, возможно, взглянуть на манипулирование строками в javascript w3schools.com/js/js_string_methods.asp и придумайте способ получить URL-адрес до lang атрибута, добавить требуемое значение атрибута, а затем переслать по адресу.

Ответ №2:

Попробуйте проверить обновленный URL-адрес с помощью условия if, а затем «очистить его» с помощью метода replace:

 document.getElementById("eng").addEventListener("click", function (e) {
    var href = e.target.getAttribute("href");
    console.log(href)

    console.log(href.includes('amp;lang=en'))
    if(href) {
        if(href.includes('amp;lang=en')){
            href.replace('amp;lang=en', '')
        }   
        location.href = href   "amp;lang=en";
        e.preventDefault();
    }
});

document.getElementById("fr").addEventListener("click", function (e) {
    var href = e.target.getAttribute("href");
    if(href) {
        if(href.includes('amp;lang=fr')){
            href.replace('amp;lang=fr', '')
        } 
        location.href = href   "amp;lang=fr";
        e.preventDefault();
    }
});

Развернуть фрагмент