如何修复split（）未定义和onclick事件中出现错误的Javascript代码？

我的背景：几年前我学习了CSS和HTML，现在我正在学习Javascript和JQuery。目前，我必须改进我公司的电子商务网站

这就是我要做的

我有一个产品页面，其中有一个产品的图片（在窗口内）和一些彩色按钮

当你点击一个颜色按钮，它会被选中，但照片不会改变

您可能猜到了，当您单击/选择与之匹配的颜色时，我想添加显示产品的图片的代码

我写了一个JS代码，我的想法是隔离图片的url，并根据颜色对应的url进行更改

问题是我遇到了以下错误：uncaughttypeerror:无法读取未定义的属性“split”。

我寻找解决办法，但似乎没有一个与我的问题相符。因此，我需要帮助

以下是HTML（显示产品图片的窗口/块）：

你能帮我找到问题所在吗？你有其他推荐的方法吗

万分感谢

纳特

---

注意：我必须用url调用图片，因为它在页面上不可用。

为什么要这么做。如果我正确理解了您的问题，您希望根据用户选择更改图像。你可以这样做

我添加了两个标签，并给它们一个唯一的颜色属性，在单击时，我正在检查该属性值，并相应地更改product div的背景图像。无需执行任何类型的字符串操作

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>

// 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);
}

玫瑰椰子

JS:

<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>

// 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);
}

//将HTML与窗口隔离
var colorSwitch=document.getElementsByClassName（'zoomWindow'）[0]；
//一次单击即可在窗口中显示图片的功能
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')";
}
};
//获取要将事件放入的元素
var chooseColorNoir=document.getElementsByTagName（'label'）；
对于（变量i=0；i

---

为什么你想做这么多。如果我正确理解了您的问题，您希望根据用户选择更改图像。你可以这样做

我添加了两个标签，并给它们一个唯一的颜色属性，在单击时，我正在检查该属性值，并相应地更改product div的背景图像。无需执行任何类型的字符串操作

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>

// 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);
}

玫瑰椰子

JS:

<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>

// 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);
}

//将HTML与窗口隔离
var colorSwitch=document.getElementsByClassName（'zoomWindow'）[0]；
//一次单击即可在窗口中显示图片的功能
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')";
}
};
//获取要将事件放入的元素
var chooseColorNoir=document.getElementsByTagName（'label'）；
对于（变量i=0；i

---

请尝试在body标记的底部添加带有脚本标记的js，此

colorSwitch[0]

不返回任何内容。在代码运行时，找不到任何类名为zoomWindow的元素。zoomWindow是否出现或消失？能否给我们一个指向该站点的链接？

colorSwitch[0]

return

htmldevelment

。不能在该元素上运行

split（）

，因为它不是字符串。请参见“请尝试在正文标记底部添加带有脚本标记的js”，此

colorSwitch[0]

没有返回任何内容。在代码运行时，找不到任何类名为zoomWindow的元素。zoomWindow是否出现或消失？能否给我们一个指向该站点的链接？

colorSwitch[0]

return

htmldevelment

。不能在该元素上运行

split（）

，因为它不是字符串。谢谢你的帮助！这就解决了问题。现在的挑战是将其集成到页面中，但不要担心，我会四处询问是否有问题。非常感谢您的帮助！这就解决了问题。现在的挑战是将其集成到页面中，但别担心，我会四处询问是否有问题。