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();
}
});
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?
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
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
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
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?
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.
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.