CODEWITHSUNDEEP
javascript
Filipe Ferreira
Filipe Ferreira

Reputation: 23

Pass color of text from label to variable javascript

I have a table with a few lines and on each line I have a text box that, when I change the text it changes the color of the text. I want to pass to a variable the color of that text.

How can I pass the color of the text to a variable?

var cor = document.getElementById('conteudo_pagina_quantidade' + i).style.color;

Upvotes: 1

Views: 115

Answers (3)

Thomas Arbona
Thomas Arbona

Reputation: 976

You have to use window.getComputedStyle for recover the computed style of an element.

const el = document.getElementById('conteudo_pagina_quantidade' + i);
const clr = window.getComputedStyle(el).getPropertyValue("color");

Upvotes: 2

Djaouad
Djaouad

Reputation: 22794

You add an event listener to all text boxes, and take their value, then change the color to that value:

for (var i=1; i<=3; i++) {
  var cor = document.getElementById('conteudo_pagina_quantidade' + i);
  cor.addEventListener('keyup', function(){ // to make it live, changes on every key stroke
    var val = this.value; // take the value
    this.style.color = val; // change the color with value
  });
}
<input id="conteudo_pagina_quantidade1" placeholder="Color...">
<input id="conteudo_pagina_quantidade2" placeholder="Color...">
<input id="conteudo_pagina_quantidade3" placeholder="Color...">

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

As you see that the line 

var cor = document.getElementById('conteudo_pagina_quantidade' + i).style.color;

works as expected. You get the color of the input text box.

for(var i=1; i<=3; i++){
  var cor = document.getElementById('conteudo_pagina_quantidade' +   i).style.color;
  console.log(cor);
}
<input type='text' id='conteudo_pagina_quantidade1' style='color:red;'/>
<input type='text' id='conteudo_pagina_quantidade2' style='color:green;'/>
<input type='text' id='conteudo_pagina_quantidade3' style='color:blue;'/>

Upvotes: 0

Related Questions