Как отключить или включить ссылки href и изменить их содержимое?

Question

У меня есть ошибка, которую нужно исправить в моем коде

  if (!creatorUrl) {
        creatorUrl = '#';
      }

По сути, вышеописанный код проверяет, есть ли у создателя URL-адрес, на который я могу перенаправить пользователя, в противном случае я не могу хочу что-нибудь сделать.

  <p class="vocab paragraph inherit-colored info__content info__content-creator">
                <a href="creator_url">Creator Name</a>
              </p>

Это тег, который я изменяю. Я хочу, чтобы ожидаемое поведение было таким: когда creatorUrl не существует, ссылка не должна отображаться вообще, а имя создателя должно быть простым текстом. Как я могу это сделать?

Answer 1

На стороне сервера было бы очевидным местом не показывать ссылку

E JS

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <% if (creatorUrl) { %>
    <a href="<%= creatorUrl %>">Creator Name</a>
  <% } else { %>
    Creator Name
  <% } %>
</p>

На стороне клиента вы можете сделать это, чтобы заменить пустые ссылки на их textContent

window.addEventListener("load",function() {
  [...document.querySelectorAll(".info__content-creator a[href^='#']")].forEach(lnk => lnk.parentNode.replaceChild(document.createTextNode(lnk.textContent), lnk));
})

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <a href="#">Creator Name</a>
</p>

<p class="vocab paragraph inherit-colored info__content info__content-creator">
  <a href="createorpage.html">Creator Name</a>
</p>

Answer 2

var a = document.getElementById ('yourlinkId'); // Даем вашему тегу привязки Id или выбираем его по своему усмотрению и сохраняем в переменной.

 if(!creatorUrl){
    a.href = '#';
    }
  else{
  a.href = "somelink url"
 }