Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/projekt/MemoRing/pages/store/js/

compare.js
store.js

compare.js

41 lines ASCII Windows (CRLF)
for (var i = 1; i < product.length; i++) {
  document.getElementById("select1").innerHTML += `
  <option value="${i}">${product[i].title}</option>
  `;
  document.getElementById("select2").innerHTML += `
  <option value="${i}">${product[i].title}</option>
  `;
}

function changeImageWithFade(elementId, newImageSrc) {
  var imgElement = document.getElementById(elementId);
  imgElement.classList.add('fade');
  imgElement.classList.add('fade-out');

  imgElement.addEventListener('transitionend', function() {
    imgElement.src = newImageSrc;
    imgElement.classList.remove('fade-out');
  }, { once: true });
}

function item1(a) {
  var select2 = document.getElementById("select2").value;
  if (a == select2) {
    return;
  }
  changeImageWithFade("img1", product[a].image);
  document.getElementById("price1").innerHTML = "$" + product[a].price;
  document.getElementById("desc1").innerHTML = product[a].description;
  document.getElementById("specs1").innerHTML = product[a].specs;
}

function item2(a) {
  var select1 = document.getElementById("select1").value;
  if (a == select1) {
    return;
  }
  changeImageWithFade("img2", product[a].image);
  document.getElementById("price2").innerHTML = "$" + product[a].price;
  document.getElementById("desc2").innerHTML = product[a].description;
  document.getElementById("specs2").innerHTML = product[a].specs;
}