I have started a website recently. But I don't have any technical knowledge.

I’m in the same boat as you, just starting out and learning as I go. The tips here have been super helpful. I especially like the idea of using a click event handler to make links non-functional without altering their appearance—really clever!

1. CSS Visibility

You can use CSS to make the link not visible on the page, but it will still be present in the HTML and accessible to screen readers, which might be beneficial for accessibility reasons.

// Hide the link using CSS visibility 
document.getElementById('myLink').style.visibility = 'hidden';

2. CSS Display

This approach completely removes the element from the document flow, as if it doesn’t exist on the page, which can affect your layout.

// Hide the link using CSS display 
document.getElementById('myLink').style.display = 'none';

3. Removing the Href Attribute

If you want to keep the link visible but non-functional, you can remove the href attribute. The link will remain visible but will not lead anywhere when clicked.

// Remove the href attribute from the link document.getElementById('myLink').removeAttribute('href');

4. Replacing the Href Attribute

You might want to replace the href with a JavaScript function or simply disable it by pointing it to javascript:void(0); which does nothing when clicked.

// Change the href to a non-functional JavaScript document.getElementById('myLink').href = 'javascript:void(0);';

5. Adding a Click Event Handler

You can also add an event handler that prevents the default link behavior, effectively disabling the link.

// Prevent the default action of the link document.getElementById('myLink').addEventListener('click', function(event) {     
event.preventDefault(); 
});

Choose the Right Method

• CSS Visibility or Display: Best for temporarily hiding links without removing them from the document (they can easily be shown again).
• Removing or Replacing the Href: Good for making a link non-functional while keeping it visible.
• Adding a Click Event Handler: Useful for more complex interactions where you might want to do something else when the link is clicked.

Remember to consider the impact on user experience and accessibility when deciding how to handle links in your web applications.

Hello @pwillson

You can achieve this in several ways.

1. You can use Void(0) to display some JavaScript code in the status bar instead of the URL and will still work as a normal link when clicked.

<a href="javascript:void(0)" onclick="location.href='https://actualwizard.com'">Mousing over this URL will display "void(0)" in the browser's status bar.</a>

2. You can use the querySelector

 <a href="https://example.com" id="myLink">Click me</a>

<script>
    // Select the link using querySelector
    var link = document.querySelector('#myLink');
    
    // Hide the link visually
    link.style.display = 'none';
</script>

Hope that this helps!