Code can be found in link below
Hello @ayanda
you have some typo here
- when using document.getElementsByClassName(’.firstdivs’)
use the name of the class without .
so it should be
document.getElementsByClassName('firstdivs')
document.getElementsByClassName('.firstdivs').addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";});
you should replace
document.getElementsByClassName('.firstdivs')
with
document.getElementById('container').addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";});
why cause the get element by class with your code return array of object not just a single one element
try to add this line in your js before you add the eventlistener
console.log(document.getElementsByClassName(‘firstdivs’))
if you right click on the result pane then inspect then choose console you will see that the line i added print an array of element so the addeventlistener has no way to be called on array
hope that help you to see the issue
another advice try to use IDE it will help you alot plus check the console tab when something go wrong as this one
and have a nice day 
Hey, there is a problem. I tried what you said, but it ends up making the whole container black when I try to do it with the code:
document.getElementById('container').addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";});
After leaving a trail and then going back to leave more trails, it just turns the whole container black…
oh so you want to remove the black color am i right?
if yes then try to use settimeout
document.getElementById('container').addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";
setTimeout(function() {
event.target.style.backgroundColor = "";
}, 500);});
check this one and modify the time to make it faster if you like
No, I am trying to make only a trail of black with my mouse only. Like an etch sketch pad. When i did it your way with the previous code targeting the container, it would turn the whole container black
did you tried this 
Yes, I’m not looking for a timeout either, its an etch sketch project so I basically want to draw with the mouse.
sorry but i do not get what you want to do
do you want to draw when you pressing on mouse or what
could you provide any app that do what you trying to do
Am trying to build something like this: Etch sketch
without the settimeout it work as the link you provide
if i get you right then maybe you need to refresh your page or clear your browser cache
after a few more of creating a trail the whole container would just turn black
i got it now
you need to addeventlisteneer to the small dv you create
function oneDiv(){
let cont=document.getElementById("container");
let div= document.createElement("div");
div.addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";});
div.setAttribute("class","firstdivs");
cont.appendChild(div);
}
remove this whole line
document.getElementById('container').addEventListener("mouseover", function(event) {
event.target.style.backgroundColor= "black";});
1 Like
Thank you!! Its perfect! How come this way works and the other way didn’t work?
you very welcome @ayanda
this way it add the event to each small div you create so when mouse go over it
it color just that small one
the other way set the event to the container which should turn the whole div to black but to be honost idk why it sometime color the small one and sometime the whole div
looks like it something related to how mouseover work so need to check this one
and have a nice day
1 Like
Solved my latest issue! My sketch pad is now perfect. Another tutorial completed successfully!
