How to fix Javascript code with error on split() undefined and onclick event?

Question

My background: I learned CSS & HTML a few years ago and I am learning Javascript & JQuery. Currently, I've got to improve the e-commerce website of my company.

Here's what I am trying to do.

I've got a product page where there is a picture of a product (inside a window) and some colour buttons.

When you click on a colour button, it gets selected but the photo doesn't change.

You probably guessed it, I want to add code that shows the picture of the product when you click/select the colour that matches it.

I wrote a JS code and my idea behind it, is to isolate the url of the picture and to change it by the one corresponding to the colour.

The problem is that I get this error: Uncaught TypeError: Cannot read property 'split' of undefined.

I searched for solutions but none of them seem to correspond to my problem. Thus, I need help.

Here's the HTML (the window/block showing the picture of the product):

<div 
    style="z-index: 999;
    overflow: hidden;
    margin-left: 0px; margin-top: 0px; 
    background-position: -144px 0px;
    width: 456px; height: 343px;
    float: left; 
    cursor: crosshair;
    background-repeat: no-repeat; position: absolute; 
    background-image: url(&quot;https://be-goji.com/wp-
    content/uploads/2017/01/OSSO-ROSE.jpg&quot;);
    top: 0px; left: 0px; display: none;"
    class="zoomWindow">&nbsp;
</div>

Here's a snippet of a Javascript code that I wrote in order to fix it (with comments):

// isolates the HTML from the window
var colorSwitch = document.getElementsByClassName('zoomWindow'); 

// splits the code in several strings in an array
var colorSwitchUrl = colorSwitch[0].split(';') 

// extracts the string I want to change
var colorSwitchChange = colorSwitchUrl.slice(12,13);

// gets the element I want to put the event onto
var chooseColorNoir = document.getElementsByTagName('label'); 

//function that brings picture to show in the window on click
chooseColorNoir[0].onclick = function(){ 

   // makes the string disappear
   colorSwitchChange.pop();

   // replaces it with a good one
   colorSwitchChange.push("https://be-goji.com/wp-
   content/uploads/2017/01/coco_noir.jpg"); 
};

Could you help me find where the problem lies? Do you have another method that you recommend?

Thanks a million!

Nat

Note: I have got to call the picture with an url since it isn't available on the page.

please try to add your js with script tag inside the bottom of body tag, — Aswin Ramesh, Nov 16 '17 at 11:17
This `colorSwitch[0]` is returning nothing. At the time that code runs it can't find any elements with the class name zoomWindow. Is the zoomWindow something that appears and disappears? — Reinstate Monica Cellio, Nov 16 '17 at 11:19
`colorSwitch[0]` return `HTMLDivElement`. You cannot run `split()` on that element, because it's not a string. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split — fian, Nov 16 '17 at 11:39

score 0 · Accepted Answer · edited Nov 16 '17 at 13:18

Why you want to do this much. If I understood your question Properly, you want to change the image based on user selection. You can simply do that like this.

I added two labels and gave those a unique color attribute and on click I am checking for that attribute value and accordingly changing the background image of the product div. No need to do any kind of string manipulations.

HTML:

<div 
    style="z-index: 999;
    overflow: hidden;
    margin-left: 0px; margin-top: 0px; 
    background-position: -144px 0px;
    width: 456px; height: 343px;
    float: left; 
    cursor: crosshair;
    background-repeat: no-repeat; position: absolute; 
    background-image: url('https://be-goji.com/wp-content/uploads/2017/01/OSSO-ROSE.jpg');
    top: 0px; left: 0px;"
    class="zoomWindow">&nbsp;
</div>

<div style="float:right">
  <label itemColor="Rose">Rose</label> <label itemColor="Coco">Coco</label>
</div>

JS:

// isolates the HTML from the window
var colorSwitch = document.getElementsByClassName('zoomWindow')[0]; 


//function that brings picture to show in the window on click
var myFunction = function(){ 
  if(this.getAttribute("itemColor") == "Rose"){
    colorSwitch.style.backgroundImage = "url('https://be-goji.com/wp-content/uploads/2017/01/OSSO-ROSE.jpg')";
  }
  else if(this.getAttribute("itemColor") == "Coco"){
      colorSwitch.style.backgroundImage = "url('https://be-goji.com/wp-content/uploads/2017/01/coco_noir.jpg')";
  }
};

// gets the element I want to put the event onto
var chooseColorNoir = document.getElementsByTagName('label'); 
for (var i = 0; i < chooseColorNoir.length; i++) {
    chooseColorNoir[i].addEventListener('click', myFunction, false);
}

Working Pen for your reference

Thanks a lot for your help! This fixes it. Now the challenge is to integrate it to the page but don't worry I'll ask around if I've got issues. — JAGENI Nat, Nov 20 '17 at 09:16

How to fix Javascript code with error on split() undefined and onclick event?

1 Answers1