trouble in jquery or javascript vanilla

New Member
1 0 0

hello; I am helping a friend in his e-commerce store, he wants to change the image when the user is using a mobile browser. Very easy, I use javascript to calculate inside one array than it have a same class which image you want to change and once it is located, changed the src for the new src. The problem is that when the user touches the icon to go to the index of this site, the images are automatically changed by default in the desktop browser. i have made a function than automatly active in this icon, with event click, after i have chaged by touch but in both time nothing happen. i have changed that to jquery and i have the same result.

 

let classe =   document.querySelectorAll(".banner .image-element__wrap");
//console.log(classe);


    let img1 = classe[0].children[0];
    //console.log(img1.src);
    //console.log(img1.setAttribute());
    let img2 = classe[1].children[0];
    //console.log(img2);
    //console.log("imagen2");
    
    let img3 = classe[2].children[0];
    //console.log(img3);
    //console.log("imagen3");
    
    let img4 = classe[3].children[0];
    //console.log(img4);
    //console.log("imagen4");
    
    if(screen.width < 800){
      	img1.outerHTML = "<img alt='' src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' data-src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png'>";
      

        img2.outerHTML = "<img alt='' src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' data-src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png'>";
        

        img3.outerHTML = "<img alt='' src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' data-src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png'>";
        
        img4.outerHTML = "<img alt='' src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' data-src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png'>";
      
    }

	let btnmenu = document.querySelector(".mobile_logo");
	let makingreal = btnmenu.addEventListener("click", changinimage);
	function changinimage(screen) {
		if(screen.width < Sdestk){
            img1.outerHTML = "<img alt='' src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' data-src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png'>";


            img2.outerHTML = "<img alt='' src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' data-src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png'>";


            img3.outerHTML = "<img alt='' src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' data-src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png'>";

            img4.outerHTML = "<img alt='' src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' data-src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png'>";

	    	};
      if(screen.orientation.angle != 0){
      
       		img1.outerHTML = "<img alt='' src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' data-src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png'>";


            img2.outerHTML = "<img alt='' src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' data-src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png'>";


            img3.outerHTML = "<img alt='' src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' data-src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png'>";

            img4.outerHTML = "<img alt='' src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' data-src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png'>";

      
      }
    }

 

and jquery 

 

var clase = $(".banner .image-element__wrap:nth-child(1) img");
  console.log(clase1[0]);
var image1 = clase[0];
var image2 = clase[1];
var image3 = clase[2];
var image4 = clase[3];

//console.log(clase2);
  //console.log(clase3);
$('.mobile_logo').click(function(){
    if($(window).width() < 800){
        image1.outerHTML = "<img alt='' src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' data-src='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/SsG2ScVG/Kyrie-Shirt-Dear-BBal-Collection.png'>";
        image2.outerHTML = "<img alt='' src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' data-src='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/KcLpNjjD/GHDBBall-Collection.png'>";
        image3.outerHTML = "<img alt='' src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' data-src='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/T1wwTFKR/Kawhi-Leonard-Jersey-Shirt-Dear-BBall-Instagram-Hashtags-Collecti.png'>";
        image4.outerHTML = "<img alt='' src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' data-src='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png' height='auto' width='3751' style='' class='transition--blur-up lazyautosizes lazyloaded' srcset='https://i.postimg.cc/wB2g3F83/Luka-Doncic-Jersey-Shirt-Dear-BBall-Collection.png'>";

        }
});

i need asap help... thk you so much

0 Likes