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

Question

My code looks like this:

.modelColors {
    width: 100%;
    height: 100vh;
    position: relative
}

.modelColors .leftCont {
    flex: 0 0 50%;
    transition: all .3s ease-in-out;
    transition: var(--anim300);
    overflow: hidden
}

.modelColors .leftCont .lead {
    width: 100%;
    max-width: 600px;
    display: block
}

.modelColors .leftCont .lead span {
    font-size: 6vw;
    font-family: "suzukiproheadline";
    font-family: var(--headline);
    line-height: 130px;
    color: rgba(0,0,0,.3);
    color: var(--blackAlpha30)
}

.modelColors .rightCont {
    flex: 0 0 50%;
    padding: 50px
}

.modelColors .rightCont .rightHolder {
    width: 100%;
    max-width: 80%
}

.modelColors .rightCont .rightHolder .modelColoImg img {
    width: 100%;
    max-width: 42px;
    margin: 0 15px 10px 0;
    transition: all .2s ease-in-out;
    transition: var(--anim200);
    border: 2px solid #eaeaea;
    border-radius: 50%;
    cursor: pointer
}

.modelColors .rightCont .rightHolder .modelColoImg img:hover {
    transform: scale(1.4);
    transition: all .2s ease-in-out;
    transition: var(--anim200)
}

.modelColors .rightCont .rightHolder .modelTopCont {
    width: 100%
}

.modelColors .rightCont .rightHolder .modelTopCont .modelBtn {
    background-color: hsla(0,0%,100%,.25);
    background-color: var(--whiteAlpha025);
    color: #202123;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 28px;
    padding: 10px 20px;
    height: 44px;
    margin: 0 20px 0 0;
    border: 1px solid #202123;
    border: 1px solid var(--black);
    transition: all .2s ease-in-out;
    transition: var(--anim200);
    font-family: "suzukiproheadline";
    font-family: var(--headline)
}

.modelColors .rightCont .rightHolder .modelTopCont .modelBtn img {
    margin: 0 10px 0 0
}

.modelColors .rightCont .rightHolder .modelTopCont .modelBtn:hover {
    transition: all .2s ease-in-out;
    transition: var(--anim200)
}

.modelColors .rightCont .rightHolder .modelTopCont .modelBtn.noBg,.modelColors .rightCont .rightHolder .modelTopCont .modelBtn:hover {
    background-color: transparent;
    border: 1px solid hsla(0,0%,100%,.7);
    border: 1px solid var(--whiteAlpha07)
}

.modelColors .rightCont .rightHolder .modelTopCont .modelBtn.noBg:hover {
    background-color: hsla(0,0%,100%,.25);
    background-color: var(--whiteAlpha025);
    transition: all .2s ease-in-out;
    transition: var(--anim200);
    border: 1px solid transparent
}

.modelColors .modelMainImage {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.el-tooltip__popper.is-light {
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    border: 1px solid #e5e5e5;
    background-color: #fff;
    font-family: "suzukiproregular";
    font-family: var(--regular);
    font-size: 18px;
    color: #202123;
    color: var(--black)
}

.el-tooltip__popper.is-light .popper__arrow {
    border-color: transparent;
    border-bottom-color: transparent!important
}

.el-tooltip__popper.is-light .popper__arrow:after {
    border-bottom-color: #fff!important
}

.modelColors .leftCont .lead span {
    font-size: 6vw;
    font-family: "suzukiproheadline";
    line-height: 130px;
    color: rgba(0,0,0,.3);
}

<section id="model-colors" class="modelColors d-flex">
    <div class="leftCont d-flex align-items-center justify-content-center" style="background-color:#D31316;">
        <div class="lead"><span>Burning Red Pearl Metallic</span></div>
    </div>
    <div class="rightCont d-flex justify-content-center">
        <div class="rightHolder">
            <div class="modelTopCont d-flex align-items-center justify-content-between">
                <h2>Colors</h2>
            </div>
            <div class="modelColoImg d-flex align-items-center justify-content-start flex-wrap">
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
                <div><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"></div>
            </div>
        </div>
    </div>
    <div class="modelMainImage"><img id="changeOne" src="https://suzuki.bizmo.al/wp-content/uploads/2023/03/red.png" alt="" class="img-responsive"></div>
    <div class="d-none"><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>

so, what i want to do is to be able to click on the colors on the right and change the background of the div on the right and the car color (replace url).

I was able to change color with javascript but i couldn't change the url of the car bellow.

How should I approach this?

Answer 1

I've revised the previous answer, and taken a different approach; given that there's more data to store I chose not to continue littering the DOM with further custom attributes – though this is a valid, and perfectly acceptable, method – and instead opted to use a JavaScript Object to cache the relevant data together, as below.

Explanatory comments are in the code to try make sense of my approach, though I'll note in advance that I've stripped away rather a lot of your HTML that seemed unnecessary (this may, or may not be unnecessary, but you'll have to decide for yourself):

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

JS Fiddle demo

References:

• HTML:
  • Custom data-* attributes.
  • Hidden attribute.
• JavaScript:
  • Array.prototype.map().
  • Array.prototype.slice().
  • Array.prototype.join().
  • Arrow functions.
  • document.querySelector().
  • document.querySelectorAll().
  • Element.querySelector().
  • Element.querySelectorAll().
  • Event.
  • Event.currentTarget().
  • EventTarget.addEventListener().
  • String.prototype.replace().
  • String.prototype.split().
  • String.prototype.toUpperCase().
  • Template-literals.

Answer 2

Try adding a class on image parent div and onclick on loop,

<div class='carparent'><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"></div>
<div class='carparent'><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"></div>
<div class='carparent'><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"></div>

<script>
    var items = document.getElementsByClassName("carparent");

    var index,l=items .length;
    for (index = 0; index < l; ++index) {
        console.log(items[index]);

        items[index].onmouseclick = function() {
            console.log(this);
            
            ..... Put your code here

        }
    }
</script>