06.외부요소 클릭시 내용 변경

변경 될 요소

            <div class="cloth_info t-right absolute" id="info" style="top:5%;right: 10%;">

                <div><h3>MINI SKIRTS</h3></div>

                <div><span>A라인 미니 스커트</span></div>

                <div><span>CHANNEL</span></div>

                <div><span>COTTON 100%</span></div>

                <div class="f9"><a href="#">자세히 보기</a></div>

            </div>

 

 id="image1" onclick="changeText('image1')" /*클릭할 요소*/

<div class="cloth_img_1 clothes">

                        <a href="javascript:;" id="image1" onclick="changeText('image1')"><img src="/images/w_girl/SHIRT_HALF_1.png" alt="옷1" id="externalImage_1" data-target="/images/w_girl/half1.png"></a>

                    </div>

                    <div class="cloth_img_2 clothes">

                        <a href="javascript:;" id="image2" onclick="changeText('image2')"><img src="/images/w_girl/SHIRT_HALF_2.png" alt="옷2" id="externalImage_2"  data-target="/images/w_girl/half2.png"></a>

                    </div>

                   

 

클릭시 변경 가능하게 할 script

//옷 이미지 클릭시 정보

function changeText(imageId) {

  var infoElement = document.getElementById("info");

  var title, description, brand, material;

  if (imageId === "image1") {

    title = "MINI SKIRTS";

    description = "A라인 미니 스커트";

    brand = "CHANNEL";

    material = "COTTON 100%";

  } else if (imageId === "image2") {

    title = "MAXI DRESS";

    description = "플로럴 맥시 드레스";

    brand = "GARDENIA";

    material = "POLYESTER 100%";

  } else if (imageId === "image3") {

    title = "T-SHIRT";

    description = "기본 티셔츠";

    brand = "COTTON Co.";

    material = "COTTON 90%, POLYESTER 10%";

  } else {

   

  }

    infoElement.innerHTML = `

      <div><h3>${title}</h3></div>

      <div><span>${description}</span></div>

      <div><span>${brand}</span></div>

      <div><span>${material}</span></div>

      <div class="f9"><a href="#">View Details</a></div>

    `;

}