Connecting with javascript through the href attribute, but lacking support for JavaScript

Question

Connecting with javascript through the href attribute, but lacking support for JavaScript

A link with a JavaScript href has been created:

<a href="javascript:document.location='http://'+location.hostname.replace('.com', '.co.uk')">stackoverflow uk</a>

Is there a way to provide a direct link like this when JavaScript is disabled?

<a href="http://stackoverflow.co.uk/questions/ask"> stackoverflow uk</a>

I am aware of the noscript tag:

<noscript><a href="http://stackoverflow.co.uk/questions/ask"> stackoverflow uk</a></noscript>

However, this will show both the broken link and the correct link. How can I remove the broken link from the user interface?

javascript asp.net noscript

Answer 1

Answer №1

Let's spice up a simple link:

<a id="foo" href="http://example.com">example</a>

Next, let's attach a JavaScript event handler to it:

const link = document.getElementById('foo'); // OR some other method to target the link
link.addEventListener('click', customHandler);

function customHandler(event) {
    // Add any additional actions you want to perform
    // ...
    // just remember to prevent the default link behavior
    event.preventDefault();
}

For more information: Progressive Enhancement and Unobtrusive JavaScript

Answer 2

Let's spice up a simple link:

<a id="foo" href="http://example.com">example</a>

Next, let's attach a JavaScript event handler to it:

const link = document.getElementById('foo'); // OR some other method to target the link
link.addEventListener('click', customHandler);

function customHandler(event) {
    // Add any additional actions you want to perform
    // ...
    // just remember to prevent the default link behavior
    event.preventDefault();
}

For more information: Progressive Enhancement and Unobtrusive JavaScript

Answer 3

Answer №2

Check out the following pseudo code snippet:

<a href="normalLink" onclick="execute javascript to dynamically create and submit a new link; return false">text</a>

In this code, the default normal link is used as a fallback option. However, when a user has JavaScript enabled, the onclick event will trigger first instead of the original link. The 'return false' statement is included to prevent the actual link from being activated.

Answer 4

Check out the following pseudo code snippet:

<a href="normalLink" onclick="execute javascript to dynamically create and submit a new link; return false">text</a>

In this code, the default normal link is used as a fallback option. However, when a user has JavaScript enabled, the onclick event will trigger first instead of the original link. The 'return false' statement is included to prevent the actual link from being activated.

Connecting with javascript through the href attribute, but lacking support for JavaScript

Answer №1

Answer №2

Similar questions

Is there a way to substitute certain values retrieved from a database within sails?

Change the object's property names from camel case to sentence case

Is it more beneficial to categorize REST-based modules/controllers by resource or by specific action/feature?

Show an image within my project's .rdl report that is located in a specific folder

Utilize Google Analytics without Tag Manager to track page views with hashed URLs using AJAX requests in a Single Page Application (SPA) web application

How can I pass a JavaScript variable through the URL in a Rails 4 application to access it in the controller?

Guide on adding an element following a directive in Angular 4

How can I stop the accordion from toggling in Bootstrap V5 when clicking on an element in the header?

AngularJS: Share event from the parent component exclusively with its child components

Serve Webpack bundle on various routes - Express Way

JavaScript method to refine JSON Data

Steps for removing the bottom border for the last child in the Material UI Box Component

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

Using FB Messenger iOS to verify a third-party app

Updating NodeJs to Express 4.0 may result in encountering errors

Difficulty in querying a DynamoDB GSI Composite key with the .NET Core Object Persistence Model

I am attempting to simultaneously filter an array of objects based on both numerical and string values

Searching for all potential arrays of length L that total N or fewer can be achieved using an algorithm

Using the $ sign to choose a subdocument in mongoose

Tips for setting up bootstrap scrollspy in Angular 6