We Keep Coding

JavaScript execution works on Chrome and not WordPress

I am running this code in Chrome console dev tools and it works:
const params = new URLSearchParams(window.location.search);
if (window.location.href.indexOf("Phone") != -1) {
$('.test111232 a').attr('href', 'tel:1 ' + params.get('Phone'));
}
if (window.location.href.indexOf("state") != -1) {
$('.test111232234 a').attr('href', 'https://www.example.com/ddd?state=' + params.get('state'));
}
However, when I save the page on WordPress with the Elementor HTML widget, it only changes the first number on the page.
Any ideas?

ok so basically what fixed the error was to add this:
$(document).ready(function()
before the code above, so it looks like this:
<script>
$(document).ready(function() {
const params = new URLSearchParams(window.location.search);
if (window.location.href.indexOf("Phone") != -1) {
$('.test111232 a').attr('href', 'tel:1 ' + params.get('Phone'));
}
if (window.location.href.indexOf("state") != -1) {
$('.test111232234 a').attr('href', 'https://www.example.com/ddd?state=' + params.get('state'));
}
});
</script>
one side point that might be relevant. I had an older version of elementor pro which could be impacting js loading through the html widget.
I had the script opening and closing tags but for some reason it wanted the function and then it worked. Could be that's the way it's suppose to be in the first place.

window.location.href and **.replace concatenates the URL instead of replacing?

I've got an issue, using window.location.href or windown.location.replace() seems to concatenate my URL instead of replacing and redirecting.
Here's my code:
$("#languages p").click(function() {
$language = $(this).text();
$lang = $language.toLowerCase();
var url = 'www.becreativeagencja.com/elplast-wp/';
var position = url.indexOf('/') + 12;
window.location.replace([url.slice(0, position), $lang, url.slice(position)].join(''));
});
Live preview at: www.becreativeagencja.com/elplast-wp --- the PL/EN/DE/RU boxes in top-right corner
What am I doing wrong? Or is that wordpress that messes it up?

jQuery increase number depending on number of elements

Fiddle: http://jsfiddle.net/6vxe8qyj/
I've written a bit of script that adds a new attribute called trackingID that takes the title of each element and adds it into a tracking string.
The above works fine.
<a class="banner" title="This Is mainBanner 1"></a>
Would be:
<a class="banner" title="This Is mainBanner 1" trackingid="MAINBANNER-_-BANNER-_-This+Is+mainBanner+1"></a>
However, I've hit a bit of a bump as I'd like the BANNER section of the string to be numbered. i.e. BANNER+1 - BANNER+2
I then have a second set of banners (#secBanners) that I need to start back at 1 again.
I'm currently getting undefined and am unsure how to continue.
Any help would be great!
Thanks

Using your current methodology of things (EXAMPLE):
JS
$('a').attr("trackingID", " ");
function tracking(element, attr, attrVal, track, i) {
track.each(function () {
var $this = $(this),
trackRegEx,
newVal = attrVal.replace(/\[intBanner\]/g, i);
$this.attr(attr, newVal);
if ($this.attr('title') !== undefined && $this.attr('title') !== '') {
trackRegEx = $this.attr('title').replace(/ /g, '+');
$this.attr('trackingID', $this.attr('trackingID') + trackRegEx);
}
i++;
});
}
tracking($('#mainBanners a'), 'trackingID', 'MAINBANNER-_-BANNER[intBanner]-_-', $('#mainBanners a[trackingID]'), 0);
tracking($('#secBanners a'), 'trackingID', 'PROMOBANNER-_-BANNER[intBanner]-_-', $('#secBanners a[trackingID]'), 0);

Is this what you wanted?
Demo#Fiddle
$(".banner").each(function() {
var title = this.title.replace(/\s+/g, "+");
$(this).attr({
"trackingid": "MAINBANNER-_-BANNER+" + title.slice(-1) + "-_-" + title
});
});
P.S. please do your other checks, such as empty/undefined etc. as you please.

This will do what you requested:
$('#mainBanners a.banner').attr('trackingID',function(i){
return 'MAINBANNER-_-BANNER+' + (i+1)
});
$('#secBanners a.banner').attr('trackingID',function(i){
return 'PROMOBANNER-_-BANNER+' + (i+1)
});
http://jsfiddle.net/6vxe8qyj/4/

CKEditor - Change image source

I have made some custom functionality to the CKEditor. In short, it shows a div tag with 5 links, for Small, Medium, Large X-Large and Original size.
When I click the links, it changes the SRC attribute of the image to the correct size.
It works, but it doesn't persist back to the editor. It's like the Image i get through the click event target, is not part of the Source code.
How can I change the Source code, when manipulating with the elements in the editor?
My code looks like this:
$(target).ckeditor(function (editor) {
$(this.document.$).bind("click", function (event) {
var target = $(event.target);
if (target.is("img")) {
var p = $("<div contenteditable='false' class='image-properties'>" + Milkshake.Resources.Text.size + ": <a class='sizeLink' href='#size1Img'>S</a> <a class='sizeLink' href='#size2Img'>M</a> <a class='sizeLink' href='#size3Img'>L</a> <a class='sizeLink' href='#size4Img'>XL</a> <a class='sizeLink' href='#size5Img'>Org.</a></div>");
p.css("top", target.position().top);
var regex = new RegExp(/(size\d{1}img)/i);
var match = regex.exec(target.attr("src"));
if (match != null) {
var imgSrize = match[0];
p.find("a[href=#" + imgSrize + "]").addClass("selected");
}
p.delegate("a", "click", function (e) {
var link = $(e.target);
if (!link.is(".selected")) {
$(".selected", link.parent()).removeClass("selected");
link.addClass("selected");
var imageSrc = target.attr("src");
imageSrc = imageSrc.replace(/(size\d{1}img)/i, link.attr("href").substring(1));
target.attr("src", imageSrc);
target.css("width", "");
target.css("height", "");
}
e.preventDefault();
});
p.insertAfter(target);
} else if (!target.is("div.image-properties")) {
$("div.image-properties", target.parent()).remove();
}
});

The src of images and href of links are protected in CKEditor to avoid browser bugs (when copying, dragging or sometimes even just loading the content), so you must update also this custom attribute:
data-cke-saved-src

Debugging the base URL element with Firebug

I'm adding the base URL tag to the document head using JS, so the relative links on the page work. But it does not take effect, and Firebug (debugging addon for Firefox) shows the <BASE /> element greyed out.. why? Does this mean Firefox cannot understand it or the syntax is incorrect?
Image http://www.freeimagehosting.net/uploads/a3122c1ddd.png

http://www.w3schools.com/TAGS/tag_base.asp
the base tag has two components href and target. Yours seems to be fine. coold you give some example of the links on which it is failing?
see http://ashita.org/StackOverflow/base_test.html for a demonstration. (my test)
Edit: see comments
function addBase(url) {
var regex = /^(https?|ftp):\/\//;
var a = Array.prototype.slice.call(document.getElementsByTagName('a'),0);
var link = Array.prototype.slice.call(document.getElementsByTagName('link'),0);
var script = Array.prototype.slice.call(document.getElementsByTagName('script'),0);
var img = Array.prototype.slice.call(document.getElementsByTagName('img'),0);
var hrefs = a.concat(link);
var srcs = img.concat(script);
var element,href,src;
for (var i=0,len=hrefs.length;i<len;++i) {
element = hrefs[i];
href = element.getAttribute("href");
if (href) {
if (!regex.test(href)) {
href = (url + "/" + href).replace("//","/"); //to handle double slash collision
element.setAttribute("href",href);
}
}
}
for (var i=0,len=srcs.length;i<len;++i) {
element = srcs[i];
src = element.getAttribute("src");
if (src) {
if (!regex.test(src)) {
src = (url + "/" + src).replace("//","/"); //to handle double slash collision
element.setAttribute("src",src);
}
}
}
}
Tested and working in firefox