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