如何修复 split() undefined 和 onclick 事件中出错的 Javascript 代码？

Question

我的背景：几年前学习了CSS & HTML，现在正在学习Javascript & JQuery。目前，我要完善我公司的电子商务网站。

这是我正在尝试做的事情。

我有一个产品页面，其中有一张产品图片（在 window 内）和一些彩色按钮。

单击颜色按钮时，它会被选中，但照片不会改变。

您可能猜到了，我想添加显示产品图片的代码当您click/select颜色 匹配它。

我写了一段JS代码，我的想法是，把图片的url隔离出来，根据颜色对应的颜色进行修改

问题是我得到这个错误：Uncaught TypeError: Cannot read 属性 'split' of undefined.

我搜索了解决方案，但其中 none 似乎符合我的问题。因此，我需要帮助。

这里是HTML（显示产品图片的window/block）：

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

这是我为修复它而编写的 Javascript 代码片段（带有注释）：

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

能帮我看看问题出在哪里吗？您有其他推荐的方法吗？

万分感谢！

自然

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

Answer 1

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

我添加了两个标签并赋予了它们独特的颜色属性，点击后我正在检查该属性值并相应地更改产品的背景图片 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>

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

如何修复 split() undefined 和 onclick 事件中出错的 Javascript 代码？

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

html

javascript

split

undefined

e-commerce