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, Dec 19 '22 at 22:11
@DreamBold I'm using the jscolor library to do that, which is the reason for ```setAttribute("data-jscolor", "{}")``` — skedada, Dec 19 '22 at 22:13
I have added the answer, it should work for you. Please have a look and let me know — DreamBold, Dec 19 '22 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, Dec 19 '22 at 22:25

DreamBold · Accepted Answer · 2022-12-20T05:45:08.293

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 '22 at 05:45

answered Dec 19 '22 at 22:23

DreamBold

2,727
1
9
24

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? – skedada Dec 19 '22 at 23:05
Updated the answer, it should work for you! https://i.imgur.com/uiRcmF7.png – DreamBold Dec 19 '22 at 23:16
You don''t need the button anymore, do you? – DreamBold Dec 19 '22 at 23:17
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. – skedada Dec 19 '22 at 23:28
Sure, no problem. If you can give me access to the site, I can help you a little more – DreamBold Dec 19 '22 at 23:39
you can reproduce what i'm doing by using tampermonkey or greasemonkey and setting the @match property to open.spotify.com/* and then pasting the javascript from your codepen (h1 element is playlist names) – skedada Dec 19 '22 at 23:40
Okay, can you send me a URL I can inspect – DreamBold Dec 19 '22 at 23:47
[this](https://open.spotify.com) is the link but you wont see any of the javascript until you inject it with something – skedada Dec 20 '22 at 00:32
There's no h1, which component do you want to change? – DreamBold Dec 20 '22 at 05:40
https://i.imgur.com/I2hfJSb.png It seems working, you should inject the jscolor js file only, I think – DreamBold Dec 20 '22 at 05:43
https://i.imgur.com/oFR4vYy.png – DreamBold Dec 20 '22 at 05:51
the h1 element is playlist names, try going to a playlist and try entering a hex code – skedada Dec 20 '22 at 16:44

score 1 · Answer 2 · answered Dec 19 '22 at 22:06

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!

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

2 Answers2

Linked