How to change background color of div and url of image when i click on a img from another div – Html

// some simple utility functions
const D = document,
  // takes a String:
  capitalize = (words) => {
    let probableSeparator = [...words].filter((char) => /W/.test(char)),
      separator = probableSeparator && probableSeparator.length ? probableSeparator[0] : /[s-]/;
    return words
        // using String.prototype.split() to separate the
        // words on space-characters to form an Array:
        .split(separator)
        // we iterate over that Array using
        // Array.prototype.map() to create a new Array:
        .map(
          // within the function we take the individual word ('w'),
          // convert the first character (w[0]) to upper-case, and
          // concatenate with the rest of the string:
          (w) => w[0].toUpperCase() + w.slice(1)
        )
        // we join those words back together and return the
        // joined sentence to the calling-context:
        .join(probableSeparator || " ");
  },
  fauxClickEvent = new Event("click"),
  get = (selector, context = D) => context.querySelector(selector),
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)];

// Object with properties to store the relevant data; because more data is
// required for this approach (more than the previous) I'm choosing to use
// an extensible method rather than further littering the DOM with custom
// attributes:
const colorChoices = {
  "burning-red": {
    name: "burning red",
    color: "black",
    colors: ["hsl(0deg 84% 45% / 1)"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/red.png",
  },
  "speedy-blue": {
    name: "speedy blue",
    color: "black",
    // obviously specify relevant/better colors in these colors Arrays:
    colors: ["blue"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/blue.png",
  },
  "pure-white": {
    name: "pure white",
    color: "black",
    colors: ["white"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/silver.png",
  },
  "premium-silver": {
    name: "premium silver",
    color: "black",
    colors: ["silver"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/sliver.png",
  },
  "mineral-gray": {
    name: "mineral gray",
    color: "black",
    colors: ["gray"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/gray.png",
  },
  "super-black": {
    name: "super black",
    color: "white",
    colors: ["black"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/black.png",
  },
  "fervent-red": {
    name: "fervent red",
    color: "black",
    colors: ["red"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/red-2.png",
  },
  "red-black": {
    name: "red-black",
    color: "black",
    colors: ["red", "black"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/black-and-red.png",
  },
  "orange-black": {
    name: "orange-black",
    color: "black",
    colors: ["orange", "black"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/orange-and-black.png",
  },
  "yellow-gray": {
    name: "yellow-gray",
    color: "black",
    colors: ["yellow", "gray"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/yellow-black.png",
  },
  "blue-black": {
    name: "blue-black",
    color: "black",
    colors: ["blue", "black"],
    src: "https://suzuki.bizmo.al/wp-content/uploads/2023/03/blue-black-1.png",
  },
};

// the named click event-handler, which takes one argument
// passed automatically from EventTarget.addEventListener(),
// which is a reference to the Event Object which was generated
// by the event that was handled/bound:
const updateColors = (evt) => {
  // retrieving the element to which the event-handler was bound:
  let choice = evt.currentTarget,
    // using destructuring assignment to retrieve the various
    // named properties from the Object retrieved from the colorChoices
    // Object, using the custom data-color-choice attribute-value as
    // the key:
    { color, colors, name, src } = colorChoices[choice.dataset.colorChoice],
    // caching elements:
    header = get("header"),
    colorChoice = get(".colorChoice", header);

  // setting the hash (fragment identifier) of the URL to the id of
  // the selected 'choice' element:
  document.location.hash = choice.id;

  // if the Array of colors - retrieved from the JavaScript Object - is
  // is equal to 1:
  if (colors.length === 1) {
    // we add a second color (because it was easier not to deal with
    // whether a gradient or solid color should be used as a background):
    colors.push(colors[0]);
  }

  // we iterate over the array of colors, using Array.prototype.forEach(),
  // passing in the reference to the current color ('col') and the index
  // of that current color in the Array ('i'):
  colors.forEach((col, i) => {
    // we use CSSStyleDeclaration.setProperty() to set the custom CSS
    // property to the value of the current color ('col'), we use a
    // template-literal to interpolate the value of the index with the
    // String of '--color':
    header.style.setProperty(`--color${i}`, col);
  });

  // we set the color of the element to the 'color' retrieved
  // from the Object:
  header.style.color = color;

  // we update the text-content of the '.colorChoice' element (cached above):
  colorChoice.textContent = capitalize(name);
  // we retrieve the '#changeOne' element, and update its 'src' property
  // to the 'src' value retrieved from the Object:
  get("#changeOne").src = src;
};

// we retreive all <img> elements within the element of class 'modelColoImg':
const colorChoiceImages = getAll(".rightHolder img");

// we iterate over that Array - getAll() specifically returns an Array in order
// that Array methods might be used - and use EventTarget.addEventListener()
// to bind the updateColors() function (note the deliberately ommitted parentheses)
// as the event-handler for the 'click' event:
colorChoiceImages.forEach((el) => el.addEventListener("click", updateColors));

// retrieving the current hash (if any):
let hash = document.location.hash,
    // if the hash is exactly equal to an empty string, target evaluates
    // to the first element from the colorChoiceImages Array; otherwise
    // we retrieve the element via get():
    target = '' === hash ? colorChoiceImages[0] : get(hash);

// if the target is found in the document and that target element matches
// the supplied CSS selector:
if (target && target.matches('section img[data-color-choice]')) {
  // we dispatch a custom 'click' Event on that target element:
  target.dispatchEvent(fauxClickEvent);
  // if you wish, you could add an 'else' or 'else if' and handle
  // an unmatched selector being passed in the hash, but I've chosen
  // not to in this demo
}

/*
  CSS properties that are likely to be used across the whole
  project/page:
*/
:root {
  --spacing: 0.5rem;
}

/*
  simple reset to remove default margin and padding, and
  to force browsers to use the same sizing algorithm (in
  order to include border-sizes and padding with an
  assigned width/height:
*/
*,
::before,
::after {
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
  padding: 0;
}

html,
body {
  min-block-size: 100%;
}

/* setting the font for the page: */
body {
  background-color: hsl(0deg 100% 100% / 1);
  font-family: "suzukiproheadline", system-ui;
  font-size: 16px;
  font-weight: 400;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
}

section {
  /*
    using grid to layout the <section> element, with a gap,
    and padding, taken from the --spacing custom property:
  */
  display: grid;
  gap: var(--spacing);
  /*
    setting an absolute size for the first column, and
    allowing the second to occupy the remaining space:
  */
  grid-template-columns: 10rem 1fr;
  /*
    allowing the browser to size the first grid-row, and
    assigning remaining space to the second grid-row:
  */
  grid-template-rows: auto 1fr;
  /*
    again, using the same custom property for consistent
    padding:
  */
  padding: var(--spacing);
  /*
    setting a maximum block-size (the block axis is the axis
    on which blocks are laid out, this is the vertical axis
    in most European languages):
  */
  max-block-size: 100vh;
}

header {
  /*
    setting a linear-gradient set to a 315 degree angle,
    with a solid color-stop at 50% between --color1 and
    --color0 (the color-order may sound odd but it's due
    to the direction):
  */
  background-image: linear-gradient(
    315deg,
    var(--color1) 0 50%,
    var(--color0) 50% 100%
  );
  /*
    setting a span of two columns, so this element will be
    positioned automatically on its grid-row (as a specific
    row isn't declared) and will span from the first column
    across to the second:
  */
  grid-column: span 2;
  /*
    using inset box-shadows to try and visually draw attention
    to the deliberate 'lack' of coloring in the event that
    - for example - the chosen color is the same as the page's
    background-color:
  */
  box-shadow: inset 0 0 0 calc(var(--spacing) / 2) var(--color0),
    inset 0 0 0 var(--spacing) currentColor;
}

.rightHolder {
  /*
    again, using CSS grid (though flex would work just as well):
  */
  display: grid;
  /* placing the element in the first grid-column: */
  grid-column: 1;
  /*
    defining two grid rows, one absolute and one to take the
    remaining available space:
  */
  grid-template-rows: 3rem 1fr;
  place-items: center;
  /*
    specifying a maximum size for the element, 100% of the available
    space on the block-axis:
  */
  max-block-size: 100%;
  /*
    specifying that the content should scroll on the y (block) axis:
  */
  overflow-y: scroll;
  position: relative;
  /* setting up scroll snapping to handle the overflow: */
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: 3rem;
}

.modelMainImage {
  display: grid;
  place-items: center;
  grid-column: 2;
}

.lead {
  font-size: 2rem;
  font-weight: 800;
  padding-block: var(--spacing);
  padding-inline: calc(var(--spacing) * 2);
}

.rightHolder h2 {
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.rightHolder img {
  aspect-ratio: 1;
  inline-size: 50%;
  margin-block: var(--spacing);
  scroll-snap-align: start;
}

<section id="model-colors">
      <header>
        <div class="lead">
          <!-- added the <span> here, in order to update the text to show the chosen-color: -->
          <span class="colorChoice">Burning Red</span>
          <span class="finish-style">Pearl Metallic</span>
        </div>
      </header>
      <div class="rightHolder">
        <h2>Colors</h2>
        <!--
          while I chose to use JavaScript to store the data, I chose to add
          an 'id' attribute to the <img> elements in order to allow, and
          check for, an element being linked to (from a color-choice shared
          via copy+paste for example):
        -->
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/burning-red.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-8288"
          tabindex="0"
          data-color-choice="burning-red"
          id="color-choice-burning-red">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/speedy-blue.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-6384"
          tabindex="0"
          data-color-choice="speedy-blue"
          id="color-choice-speedy-blue">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/pure-white.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-9890"
          tabindex="0"
          data-color-choice="pure-white"
          id="color-choice-pure-white">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/premium-silver.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-1345"
          tabindex="0"
          data-color-choice="premium-silver"
          id="color-choice-premium-silver">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/mineral-gray.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-5504"
          tabindex="0"
          data-color-choice="mineral-gray"
          id="color-choice-mineral-gray">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/super-black.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-7421"
          tabindex="0"
          data-color-choice="super-black"
          id="color-choice-super-black">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/fervent-red.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-9427"
          tabindex="0"
          data-color-choice="fervent-red"
          id="color-choice-fervent-red">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/red-black.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-6672"
          tabindex="0"
          data-color-choice="red-black"
          id="color-choice-red-black">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/orange-black.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-7222"
          tabindex="0"
          data-color-choice="orange-black"
          id="color-choice-orange-black">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/yellow-gray.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-7131"
          tabindex="0"
          data-color-choice="yellow-gray"
          id="color-choice-yellow-gray">
        <img
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/blue-black.png"
          class="el-tooltip img-responsive item s16"
          aria-describedby="el-tooltip-5123"
          tabindex="0"
          data-color-choice="blue-black"
          id="color-choice-blue-black" />
      </div>
      <div class="modelMainImage">
        <img
          id="changeOne"
          src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/red.png"
          alt=""
          class="img-responsive" />
      </div>
      <!--
        I added the "hidden" attribute in order to hide the content of this element,
        without relying on CSS to do so (this is a purely personal preference); I would
        have removed this content entirely but chose to leave them in order for the
        browser to cache/preload them in advance of the user choosing a color option:
      -->
      <div hidden="">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/red.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/blue.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/silver.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/sliver.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/gray.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/black.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/red-2.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/black-and-red.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/orange-and-black.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/yellow-black.png">
        <img src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/blue-black-1.png">
      </div>
    </section>