How to disable or enable href links and change the contents of it?

Gaurav ahlawat

I have a bug to fix in my code

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

Basically what the above code does is, it checks if the creator has a URL to which I can redirect the user, otherwise I don't want to do anything.

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

This is the tag which I am modifying. I want the expected behaviour to be like, when the creatorUrl doesn't exist,the Link shouldn't show up at all and the creator name should be a plain text.How can I do this ?

mplungjan

On the server side, it would be an obvious place to not show a link

EJS

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

On the client side you can do this to replace empty links with their 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.