CODEWITHSUNDEEP
javascript
Vicky Pawar
Vicky Pawar

Reputation: 45

how to change div background color with anothor div attribute value in js

hello guys i got small problem in javascript..

i want to change the background color of .gradient_color class and the color should be another class attribute value... i want to do this with 50+ divs all divs with different color .. how can i set the .gradient_color div background with the value of data-clipboard-text

<div class="box">
          <div class="gradient_color"></div>
          <div
            class="copyButton"
            data-clipboard-text="background: linear-gradient(to right, #8e2de2,#8f6ba8);"
          >
            COPY
          </div>
        </div>
        <div class="box">
          <div class="gradient_color"></div>
          <div
            class="copyButton"
            data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)"
          >
            COPY
          </div>
        </div>

Upvotes: 0

Views: 69

Answers (3)

Precious Adeyinka
Precious Adeyinka

Reputation: 21

I hope this answers your question?

let elem_with_color_class = document.querySelectorAll('.copyButton');

elem_with_color_class.forEach((elem) => {
  elem.addEventListener('click', function() {
    let parent = this.parentElement;
    let target_elem = parent.querySelector('.gradient_color');

    target_elem.style.background = this.getAttribute('data-clipboard-text');
  });
});
.box {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}

.gradient_color {
  height: 30px;
  width: 50px;
  border: 1px solid #aaa;
  margin: 1em;
  display: inline-block;
}

.copyButton {
  height: 30px;
  width: 100px;
  font-size: 12px;
  font-weight: 500;
  font-family: "Quicksand", sans-serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #fff;
  user-select: none;
  outline: none;
  background: darkseagreen;
  border-radius: 2px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.10);
}
<div class="box">
  <div class="gradient_color"></div>

  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">COPY</div>
</div>

<div class="box">
  <div class="gradient_color"></div>

  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">COPY</div>
</div>

Upvotes: 1

Talmacel Marian Silviu
Talmacel Marian Silviu

Reputation: 1736

This should work as well:

const gradientColors = document.querySelectorAll('.gradient_color');
const copyButtons = document.querySelectorAll('.copyButton');

gradientColors.forEach((div,index)=>{
const color = copyButtons[index].dataset.clipboardText;
div.style.background=color;
});
.gradient_color {
  width: 50px;
  height: 50px;
  border: 1px solid;
}
<div class="box">
  <div class="gradient_color"></div>
  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
    COPY
  </div>
</div>
<div class="box">
  <div class="gradient_color"></div>
  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
    COPY
  </div>
</div>

Upvotes: 1

Yousaf
Yousaf

Reputation: 29281

you could get all the .gradient_color elements using querySelectorAll and loop over the returned collection. In each iteration, get the next element sibling for the current .gradient_color element and read its data-clipboard-text attribute and set is as background of the current .gradient_color element

const divs = document.querySelectorAll('.gradient_color');

divs.forEach(d => {
  d.style.background = d.nextElementSibling.dataset.clipboardText;
})
.gradient_color {
  width: 50px;
  height: 50px;
  border: 1px solid;
}
<div class="box">
  <div class="gradient_color"></div>
  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
    COPY
  </div>
</div>
<div class="box">
  <div class="gradient_color"></div>
  <div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
    COPY
  </div>
</div>

Upvotes: 2

Related Questions