.addEventListener() Won't Work

my event listener won’t work on the keyup, but when i try it on a different element it works normally, Help

HTML

<!--Button make text color settings appear-->
			<button id="textColorToggle" onclick="textColorToggle()">
				Change Text Color
			</button>

			<!-- Color Settings -->
			<div id="colorInput">
				<input id="colorPlace" placeholder="Enter A Color" />
				<button id="stylesButton" onclick="styleButton()">
					Confirm
				</button>
			</div>

JavaScript

var colorInput = document.getElementById("colorInput");
var colorToggle = document.getElementById("textColorToggle");
var stylesBtn = document.getElementById("stylesButton");

//function that will toggle the color settings
function textColorToggle() {
	var colorInput = document.getElementById("colorInput");
	var colorToggle = document.getElementById("textColorToggle");
	colorInput.style.display = "block";
	colorToggle.style.display = "none";
}

//function that will be run when the "Confirm" button is pressed
function styleButton() {
	var coloring = document.getElementById("colorPlace").value;
	var colorInput = document.getElementById("colorInput");
	var colorToggle = document.getElementById("textColorToggle");
	document.getElementById("colorPlace").value;
	document.getElementById("prototype").style.color = coloring;
	colorInput.style.display = "none";
	colorToggle.style.display = "inline";
}

//when the user presses the "Enter", it will click the button automatically
document.getElementById("colorPlace").addEventListener("keyup", function(event) {
	if (event.keyCode === 13) {
		event.preventDefault();
		styleButton();
	}
});

I don’t know why its not working

My bad, yes, the div can catch the keyup event on the bubble.

Look in the JS console. The styleButton function is throwing an error.

I changed it and it still doesn’t work

	document.getElementById("prototype").style.color = coloring;

This line throws an error. There’s no element with id “prototype”. Is this an element in a different part of your code or did you mean a to use a different id here?

its part of my code that i didn’t put in bc its quite a long one

1 Like

I’ve tried your code on JSFiddle and the event fires fine but throws that error when calling styleButton().

Have you tried looking at the console when testing?

I checked the console, and it always says that there is a null variable.
It says colorInput is null even though i declared it and assigned an element to it. I don’t know how to fix it either

Are you coding locally or using codepen or something similar? I get the same issue on JSBin and JSFiddle but no null errors on my machine.

I’m using Visual Studio Code, and I used my browser’s console to debug some of my code because it was faster. My browser is Firefox. I don’t know why this doesn’t work, because I tried it with different elements and it worked fine

JSBin
The event fires okay on this JSbin and no null errors after I removed the line referencing #prototype.

All the events fire normally for me too, except the ones i showed you. And I don’t think it have any relation with the null on the webpages, because it is variables that need user input in the first place

You’re saying the keyup event is not working and it is working. What else is an issue?

I’m saying is that there are some keyup event that are working, but there is two that doesn’t work, including the one I showed on the code.

But the one you showed is working. As I showed you on the JSBin. The only issue here was the referencing of #prototype. Are you sure you posted the right code? Do you think you could put the whole thing on codepen or something else?

Here you go… It’s supposed to be a 3 page website, but I put the page that has problems with it.
https://codepen.io/joshua-hasian/pen/OJyyYJd

There’s no element with id bgImgInput in your HTML so urlInput is null which causes errors down the line and most likely the addEventListener never gets called. I need to go to bed now so can’t help you more at the moment. Try to fix the code that references the variable I mentioned and let us know if you sorted it out.

As i told you, It’s a 3 page website, that means there is 3 html files and the id bgImgInput id is in a different page

I understand. Then you need to remove the code if the element isn’t there. Each page has its own context and if it isn’t loaded your javascript won’t know about its existence.

Basically for each page you will need to customise your script a little to avoid referencing non-existing elements.

I cut all the parts that doesn’t connect to the page in the CodePen
https://codepen.io/joshua-hasian/pen/OJyyYJd

Works fine now.
Replace the call to styleButton() with console.log(event) and you’ll see that the event fires properly.