split() undefined 및 onclick 이벤트에서 Javascript 코드를 수정하는 방법은 무엇입니까?

내 배경 : CSS & HTML을 몇 년 전에 배웠고 Javascript & JQuery를 배우고 있습니다. 현재 저는 회사의 전자 상거래 웹 사이트를 개선해야합니다.split() undefined 및 onclick 이벤트에서 Javascript 코드를 수정하는 방법은 무엇입니까?

다음은 내가하려는 일입니다.

제품 사진 (창 내부)과 일부 색상 버튼이있는 제품 페이지가 있습니다.

색상 버튼을 클릭하면 사진이 변경되지만 사진은 변경되지 않습니다.

당신은 아마 난 당신이 클릭 할 때/IT 일치하는 색상을 선택 제품 의 그림을 보여줍니다 코드를 추가하려면, 그것을 짐작.

나는 JS 코드와 그 뒤에 내 생각을 썼다. 그림의 URL을 격리하고 색상에 해당하는 것으로 바꾸는 것이다.

문제점 :이 오류가 발생합니다. 잡히지 않은 TypeError : 정의되지 않은 'split'속성을 읽을 수 없습니다.

해결책을 찾았지만 문제가 해결되지 않은 것 같습니다. 따라서 도움이 필요합니다.

: 여기

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

내가 위해 (의견)을 해결하기 위해 쓴 자바 스크립트 코드의 조각이다 : 여기

는 (윈도우/블록 제품의 사진을 보여주는)를 HTML의

// 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과 함께 사진을 전화를 가지고있다.

출처

2017-11-16 JAGENI Nat

body 태그의 하단 내부에 스크립트 태그와 JS를 추가하려고하십시오 –

이'colorSwitch [0]'아무것도 반환하지 않습니다. 코드가 실행될 때 클래스 이름이 zoomWindow 인 요소를 찾을 수 없습니다. zoomWindow가 나타나고 사라지는 것이 있습니까? – Archer

사이트에 대한 링크를 제공해 줄 수 있습니까? – Archer

같은 것을보십시오. 질문을 이해했다면 사용자 선택에 따라 이미지를 변경하고 싶습니다. 이렇게 간단하게 할 수 있습니다.

두 개의 라벨을 추가하고 고유 한 색상 속성을 부여했으며 클릭시 해당 속성 값을 확인하고 이에 따라 제품 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

출처

2017-11-16 11:51:42 rahul

도움을 주셔서 감사합니다. 이것으로 해결됩니다. 이제 도전 과제는 페이지에 통합하는 것입니다.하지만 문제가 발생했는지 묻습니다. –

-1

오류는 분명히 colorSwitch [0]이 정의되지 않았다고 말합니다. 아마 colorWithow div가 기회를로드하기 전에 javascript 코드가 실행되기 때문에 colorSwitch도 정의되지 않았을 것입니다. 당신이 많은이 작업을 수행 할 왜

<body onload="runJavascript()">

출처

2017-11-16 11:23:25

split() undefined 및 onclick 이벤트에서 Javascript 코드를 수정하는 방법은 무엇입니까?

답변

관련 문제