Shopify - change main image on bold product option swatch click

ChangeImageBoldOptionSwatch.js

$(document).ready(function(){
var boldFinder = setInterval(function(){
	if($('.bold_option_swatch').length > 0){
		$('.bold_option_swatch').eq(0).find('.bold_option_value').on('click', function(){
			var clutch_selected = $(this).find('input.sw_607037_276033').attr('data-option_value_key');
			console.log(clutch_selected);
			//returns url("....");
			var imgUrl = $(this).find('span.bold_option_value_swatch span').css('background-image');
			//replace the url("
			//console.log(imgUrl.toString().slice(5));
			var prosUrl = imgUrl.toString().slice(5);
			//delete the last two charsS
			var finalUrl = prosUrl.slice(0, -2);
			console.log(finalUrl);
			//var s = 'cat1234';
			$('.product-main-image img').attr('src', finalUrl);
			//var boo = $('.bold_swatch_selected span.bold_option_value_swatch span').css('background-image');
			//alert(boo.slice(0, -2));
		});  
  	}
}, 1);
});

Okay David, you are doing it a little bit wrong. See the code updated.

And as I can see on your attached image, on line 84, you are missing DOM identifier. product-image-main-- I assume this is an ID. if yes, put it as #product-image-main-- or if it's a class .product-image-main--

Email me directly for any other things: ratiqur807@gmail.com