Changing text color in javascript not working as expected (but css equivalent works fine?)

Question

I am a beginner in Javascript and am working on a few smaller projects in tampermonkey to build my knowledge.

In one of my projects, I am trying to use javascript to change the text color of h1. This sounds like a really simple thing but for whatever reason, nothing I've tried so far has worked as expected.

I've tried using Stylebot to inject the CSS equivalent which works perfectly fine.

Here are the Javascript methods that I have tried (using #ffff00 as an example):

For the two examples below, I have also tried replacing getElementsByTagName with getElementById, querySelector/querySelectorAll, and getElementsByClassName

let hexValue = "#ffff00" 
document.getElementsByTagName("h1").style.color = hexValue;

let h1 = document.getElementsByTagName("h1")
h1.style.color = "#ffff00"

Original code I was trying at the beginning which takes hex code from a user input:

let tc1 = document.getElementsByTagName("h1");
let btn = document.createElement("button")
btn.textContent = 'update'
btn.addEventListener('click', changeTextColor)
let jsc = document.createElement("input");
jsc.setAttribute('id', 'hexInput');
jsc.setAttribute("data-jscolor", "{}")

function changeTextColor() {
jsc.addEventListener('change', function() {
let hexValue = this.value; //in this line, i have also tried document.getElementById('hexInput').value
tc1.style.color = hexValue;

}
document.body.insertAdjacentElement('beforebegin', jsc)
document.body.insertAdjacentElement('beforebegin', btn)
jscolor.install()

Your problem is that you are trying to use style property on a html collection. If you want to test if what I am saying is true change the code to h1[0].style.color = "#ffff00" or use querySelector('h1').style.color = "#ffff00" but it will update just the first h1 element on the page — George Pandurov
– George Pandurov, Commented Dec 19, 2022 at 22:11
@DreamBold I'm using the jscolor library to do that, which is the reason for setAttribute("data-jscolor", "{}") — skedada
– skedada, Commented Dec 19, 2022 at 22:13
I have added the answer, it should work for you. Please have a look and let me know — dreambold
– dreambold, Commented Dec 19, 2022 at 22:23
Will you use the UPdate button to update the color or will need it update the color as soon as you pick a color? — dreambold
– dreambold, Commented Dec 19, 2022 at 22:25

dreambold · Accepted Answer · 2022-12-20 05:45:08Z

2

You can try this solution, hope it helps!

let tc1 = document.getElementsByTagName("h1")[0];

var button = document.createElement("button");
button.textContent = "Update";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener("click", changeTextColor);

let jsc = document.createElement("input");
jsc.setAttribute("id", "hexInput");
jsc.setAttribute("data-jscolor", "{}");
// jsc.setAttribute("type", "color");
body.appendChild(jsc);

jsc.addEventListener("change", changeTextColor);

function changeTextColor() {
  let hexValue = document.getElementById("hexInput").value;
  console.log(hexValue);
  // tc1.style.color = hexValue;
  tc1.setAttribute("style", `color:${hexValue} !important`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.min.js" integrity="sha512-/e+XGe8oSD9M1t0NKNCrUlRsiyeFTiZw4+pmf0g8wTbc8IfiLwJsjTODc/pq3hKhKAdsehJs7STPvX7SkFSpOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.5.1/jscolor.js" integrity="sha512-UP6tOIJfUgQv7uNUL4IXb8HDO1PlEUVSOuPGUcX11obi7Eh24geCoL2X+8JxB4tA9BfdppntOzqrmVQUblSYYQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>THIS</h1>

Live demo here: https://codepen.io/dreambold/pen/gOjOjrP?editors=1010

edited Dec 20, 2022 at 5:45

answered Dec 19, 2022 at 22:23

dreambold

3,1001 gold badge16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

skedada Over a year ago

this works in the codepen, but I'm using tampermonkey to inject it into open.spotify.com (and maybe more in the future). Is there a way to add !important to styles using js?

dreambold Over a year ago

Updated the answer, it should work for you! i.imgur.com/uiRcmF7.png

dreambold Over a year ago

You don''t need the button anymore, do you?

skedada Over a year ago

Thanks for updating, however it still doesn't function as expected in the site. I think this is more of a specific case issue, maybe spotify is interfering with something. Thank you for helping it's been great though. I'll poke around in inspect element to see if there's something that will work.

dreambold Over a year ago

Sure, no problem. If you can give me access to the site, I can help you a little more

|

Andrea Roveroni · Accepted Answer · 2022-12-19 22:06:30Z

1

The method getElementsByTagName() returns a collection of elements (every tag h1 in the page in your case), not a single element. Try using document.querySelector('tag'). You can use any css selector as the argument, so you can search for tagnames, classes or ids in the DOM.

Here are the docs!

answered Dec 19, 2022 at 22:06

Andrea Roveroni

3003 silver badges9 bronze badges

Collectives™ on Stack Overflow

Changing text color in javascript not working as expected (but css equivalent works fine?)

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related