Deactivating a hyperlink on my print-friendly webpage with JavaScript

Question

Deactivating a hyperlink on my print-friendly webpage with JavaScript

My code is designed to generate a printable version of a webpage by duplicating the HTML content and then making certain modifications, such as deactivating buttons upon page load.

In addition to disabling buttons, I also aim to deactivate all links on the page. It doesn't matter if they still visually appear as links, as long as they don't have any functionality and don't trigger any JavaScript errors! Unfortunately, the anchor tag does not support a disabled attribute...

Regrettably, I am unable to utilize jQuery for this task, so I need a solution using only JavaScript!

Edit: My goal is to prevent users from interacting with the 'printable page' in another window by disabling links, buttons, and other elements on the page. This way, it will act as a static 'frozen snapshot' of the original page that users intend to print.

javascript html anchor

Answer 1

Answer №1

By setting the href attribute to "#" and replacing the onclick event, you can achieve the desired result.

let anchorTags = document.getElementsByTagName("A"), k;
for (k = 0; k < anchorTags.length; k += 1) {
    anchorTags[k].href = '#';
    anchorTags[k].onclick = function () {
        return false;
    };
}

Answer 2

By setting the href attribute to "#" and replacing the onclick event, you can achieve the desired result.

let anchorTags = document.getElementsByTagName("A"), k;
for (k = 0; k < anchorTags.length; k += 1) {
    anchorTags[k].href = '#';
    anchorTags[k].onclick = function () {
        return false;
    };
}

Answer 3

Answer №2

Have you considered using jQuery for this task? It offers a much smoother solution...

$('a').each(function(){this.onclick=function(){return false}});

However, if you prefer a more traditional approach in vanilla JavaScript, here is a simpler method that does not require modifying the links directly. By setting the onclick event to return false, you can prevent the link from being visited:

var anchors = document.getElementsByTagName("a");
    for (i = 0; i < anchors.length; i++)
        anchors[i].onclick = function(){return false};

Answer 4

Have you considered using jQuery for this task? It offers a much smoother solution...

$('a').each(function(){this.onclick=function(){return false}});

However, if you prefer a more traditional approach in vanilla JavaScript, here is a simpler method that does not require modifying the links directly. By setting the onclick event to return false, you can prevent the link from being visited:

var anchors = document.getElementsByTagName("a");
    for (i = 0; i < anchors.length; i++)
        anchors[i].onclick = function(){return false};

Answer 5

Answer №3

In addition, the document object contains a variety of links. Although I have not personally attempted it, I think it is possible to manipulate them as well.

for (i=0;i<document.links.length;i+=1) {
  document.links[i].href = 'https://example.com';
}

Answer 6

In addition, the document object contains a variety of links. Although I have not personally attempted it, I think it is possible to manipulate them as well.

for (i=0;i<document.links.length;i+=1) {
  document.links[i].href = 'https://example.com';
}

Deactivating a hyperlink on my print-friendly webpage with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the proper way to detach an event listener from a class?

Ways to verify if the user has inputted a typeahed value

Issue with 1.bundle.js not loading during webpack production build with routing

Incorporating a javascript library or plugin into Vue.js code

Encountering a problem when trying to utilize material-ui icons in a React application

Highlight dates in Vue.js that are overdue using a date filter

Preserving the background image on an html canvas along with the drawing on the canvas

An error in Coffeescript and Express.js: attempting to call the 'sliced' method on an undefined object

How to retrieve an anchor element from a list using JavaScript

Retrieving the IDs of all socket connections in a Node.js Socket.IO array

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

Steps for clearing input field with type=date in Protractor:

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

Code in JavaScript: Generating Random Number within a Loop

The execution of dynamically generated Javascript in JSON format, returned through AJAX, is prevented when it is appended

Tips for extracting a value from a currently active list item's anchor tag with JQuery on Mapbox API?

What is the best way to interweave my objects within this tree using recursion?

Is there a way to display my array within my React component using JavaScript?

Move the components over to the right