Jquery code working in console but not in Webflow

Design help Custom code
1

I wrote a jquery code to trigger an alart on click of radiobutton (My credits/ Company credits/ Customer pay). I got the code to work perfectly in codepen and the console, but when I past in Webflow page body, it doesn’t work. Can anyone help check this out?

Here is the code:

$(document).ready(function () {
$(‘input[name=“Triggarr”]’).change(function () {
var mc = document.getElementById(‘my-credit’)
var cc = document.getElementById(‘company-credit’)
var cp = document.getElementById(‘customer-pay’)

var rad1 = document.getElementById('radio1')
var rad2 = document.getElementById('radio2')
var rad3 = document.getElementById('radio3')

if(rad1.checked) {
alert(“UK is checked”);
}

else if(rad2.checked) {
	alert('Europe is checked');
}

else if(rad3.checked) {
	alert('Nigeria is checked');
}

});
});

page: Test
codepen: https://codepen.io/BaaWA1/pen/jOpdRJP
Loom video: Loom | Free Screen & Video Recording Software | Loom

2

In your webflow.io site you have a memberstack error.
You’ll want to fix that first as it may well be stopping your script execution for the page.

Dropping a breakpoint on your change() jquery event shows it’s not getting hit on page load.

3

hi @BaaWA I didn’t check your site for errors as @memetican already did it. So here are m2c. :wink: In your CodePen example the HTML has some extra " at the end of some divs that cause errors in your CodePen example. Because of this, I have done for you a simplified version in javaScript to get an idea of how it can be done.