How to manipulate dataset.imagelink with javascript?

how are you? I looked all over SO and Google (also asked for assistance on freenode #javascript) and had luck so far. Maybe someone can help me.

What I want to do - I'm using ClickFunnels (built with RoR) and I need to get some values from a cookie and pass them as parameters of a query string link inside a button and an image.

I'm pretty new to javascript so I might be missing something obvious, however the folks on freenode couldn't help with my issue. The code below works as expected on Google Chrome Version 68.0.3440.106 (Official Build) (64-bit). This is the only version I could run this code as I expected.

On the latest version of Google Chrome (both desktop and mobile) and Firefox, the code does not work as I expected.

    function getCookie()
    {
        // store cookie in var
        var insCookie = document.cookie;
        // split on ";"
        var cookieArr = insCookie.split(";");
        // creates the Obj
        var cookieObj = {}
        // iterates through the resulting array
        // for each arr el => trim() => split on "=" => store each key-value pair on an object
        for (var i = 0; i < cookieArr.length; i++)
        {
        // do step 3
            //trim
            var cookieKV = cookieArr[i];
            cookieKV =  cookieKV.trim();

            // split on "="
            var cookieKVArr = cookieKV.split("=");

            // store kv on obj
            cookieObj[cookieKVArr[0]] = cookieKVArr[1];
        }
        return cookieObj;
    }
// starts to use what we got stored
    var obj = getCookie();
    var button = document.querySelectorAll("a.elButton");
    var my_btn = button[0];
    var href = my_btn.href;
// Starts to generate new button url based on cookie data
    href = href.replace(/#prod_geo#/g,obj.prod_geo).replace(/#prod_name#/g,obj.prod_name).replace(/#subprod_name#/g,obj.subprod_name).replace(/#offer_name#/g,obj.offer_name).replace(/#offer_device#/g,obj.offer_device);
  function ChangeUrl() {
    $("a[href*='#prod_geo#']").attr("href",href);
  };
  var img = document.querySelectorAll("img.elIMG");
  var my_img = img[1];
  var img_href = my_img.dataset.imagelink;
// Starts to generate new img url based on cookie data
  var new_img_href = img_href.replace(/#prod_geo#/g,obj.prod_geo).replace(/#prod_name#/g,obj.prod_name).replace(/#subprod_name#/g,obj.subprod_name).replace(/#offer_name#/g,obj.offer_name).replace(/#offer_device#/g,obj.offer_device);

  window.onload = function() {
  ChangeUrl();
  // change url for the image
  my_img.dataset.imagelink = new_img_href;
  };

The problem - what happens is that, once the page loads completely, the browser redirects automatically to the link within the button/image. The parameters get sent as it should, but I don't want to automatically redirect the user, I just want to build the link as it should be once the user click on the button/image.

My thoughts - I'm guessing that the problem is when I change the parameters on the image. The browser does not redirect automatically if I change only the parameters on the button (and don't even mention the image on the code). So I must be doing some wrong when I manipulate the dataset.imagelink. I could not find any information that would instruct me on this matter.

Other considerations - This is my first attempt of doing anything with javascript so bear with me. Also, I have no control over how the html elements are built so I just need to deal with what I already have. One last thing, if you need more information, please let me know.

Thanks in advance,

Crova

0 comments · 67% upvoted · other discussions

comments

No public comments to show.