Change location.href with jQuery

Question

I need to change the location.href of some URLs on my site. These are product cards and they do not contain "a" (which would make this a lot easier).

Here is the HTML:

<div class="product-card " onclick="location.href='https://www.google.com'">

I mean it is pretty simple, but I just cannot get it to work. Did not find any results from Google without this type of results, all of which contain the "a":

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Any ideas on how to get this to work with jQuery (or simple JS)?

I cannot change the code itself unfortunaltely, I can just manipulate it with jQuery and JS.

Answer 1

To change the onClick for all the class='product-card', you can do something like this:

// All the links
const links = document.getElementsByClassName('product-card');

// Loop over them
Array.prototype.forEach.call(links, function(el) {

    // Set new onClick
    el.setAttribute("onClick", "location.href = 'http://www.live.com/'" );
});

<div class="product-card " onclick="location.href='https://www.google.com'">Test</div>

Will produce the following DOM:

<div class="product-card " onclick="location.href = 'http://www.live.com/'">Test</div>

---

Another option, is to loop over each <div> and check if something like google.com is present in the onClick, if so, we can safely change it without altering any other divs with the same class like so:

// All the divs (or any other element)
const allDivs = document.getElementsByTagName('div');

// For each
Array.from(allDivs).forEach(function(div) {

  // If the 'onClick' contains 'google.com', lets change 
  const oc = div.getAttributeNode('onclick');
  if (oc && oc.nodeValue.includes('google.com')) {
  
     // Change onClick
     div.setAttribute("onClick", "location.href = 'http://www.live.com/'" );
  }
});

<div class="product-card" onclick="location.href='https://www.google.com'">Change me</div>
<div class="product-card">Don't touch me!</div>