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

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 these 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"

and here is the 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()

CodePudding user response：

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!

CodePudding user response：

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", "{}");
body.appendChild(jsc);

jsc.addEventListener("change", changeTextColor);

function changeTextColor() {
  let hexValue = document.getElementById("hexInput").value;
  tc1.style.color = hexValue;
}

<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