Looking for Help with Button (Javascript)

Hi,

link: https://www.tourjet.co.uk/packages

I have scripted in a "Learn More" button with Java - I want the buttons to have the same hyperlink as the images above them which will directly link to the product (the same as the image does).

Here is my code. Could anybody help with this?

 

<script>
function replaceLearnMore() {
  const textElements = document.querySelectorAll('p, span'); // Adjust selectors as needed

  textElements.forEach(element => {
    const text = element.textContent.trim().toLowerCase();
    if (text === '_learn_more_') {
      const wrapper = element.closest('.sqs-block-content');
      if (wrapper) {
        const button = document.createElement('button');
        button.textContent = 'Learn More';
        button.style.backgroundColor = '#0a4f65';
        button.style.color = '#fff';
        button.style.padding = '10px 20px';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';

        // Get the href from the first link within the wrapper
        const link = wrapper.querySelector('a');
        if (link) {
          button.href = link.href;
        }

        element.parentNode.replaceChild(button, element);
      }
    }
  });
}

window.addEventListener('load', replaceLearnMore);

</script>

Ignore please - sorry

Solved:-


 

function replaceLearnMore() {
  const textElements = document.querySelectorAll('p, span');

  textElements.forEach(element => {
    const text = element.textContent.trim().toLowerCase();
    if (text === '_learn_more_') {
      const wrapper = element.closest('.sqs-block-content');
      if (wrapper) {
        const productTitleElement = wrapper.querySelector('.product-title');
        if (productTitleElement) {
          const link = productTitleElement.querySelector('a');
          let href;

          if (link) {
            href = link.href;
          } else {
            href = productTitleElement.getAttribute('href');
          }

          if (href) {
            // Create an anchor element instead of a button to use the href
            const anchor = document.createElement('a');
            anchor.textContent = 'Learn More';
            anchor.href = href;  // Set the hyperlink
            anchor.style.display = 'inline-block';
            anchor.style.backgroundColor = '#0a4f65';
            anchor.style.color = '#fff';
            anchor.style.padding = '10px 20px';
            anchor.style.border = 'none';
            anchor.style.borderRadius = '5px';
            anchor.style.cursor = 'pointer';
            anchor.style.textDecoration = 'none';

            element.parentNode.replaceChild(anchor, element);
          }
        }
      }
    }
  });
}

window.addEventListener('load', replaceLearnMore);