CODEWITHSUNDEEP
javascripteventscreateelement
Kenneth McAusland
Kenneth McAusland

Reputation: 75

Using an addEventListener to add Child elements and things have gone awry

Before anything comes up, thank you guys for taking the time to have a look. I'm having some issues going on with adding event listeners over the standard anonymous functions I would typically use for events. What I'd like to do is this. I have a list of anchor tags from a drop down menu. From this drop down menu, what I'd like to do is have an onmouseover event happen and create a brand new link before clicking on it. Here's what I have so far to make some better sense of what I'm on about.

I created a brand new variable that "houses" the eventlistener with this.

var onMouseOver = document.getElementById('menuIcon');

and then what I did next was simply create variables that houses all the new elements I created. Here's my list element....

var newLi = document.createElement('li');

and here's my anchor element...

var newA = document.createElement('a');

now what I did next was simply create a parent element to start appendingChilds to these newly created elements with this.

var parent = document.getElementById('ul-li-a').getElementsByTagName('li');

Now this is where I know I screwed up pretty royally. I was trying my first hand at eventlistener with this....

    onMouseOver.addEventListener('onmouseover' function() {
parent[11].appendChild(newA);
newA.appendChild(newLi);
newA.innerHTML = '<a>Ken\'s Link</a>';
});

but then I get a nice syntax error. Uncaught SyntaxError: missing ) after argument list.

Yeah I'm doing something wrong and I know that you guys might look at this like it's obvious but after twenty minutes of straight trying to find an answer, I'm coming up short. What exactly have I done wrong?

again thank you all that took the time to answer this. You guys are very much a god send.

EDIT!!!!!!!!!!

thanks for the feedback, guys. I made it work and now I have one last question to ask before this project is done. I'm trying to add the same event listener with the same result from creating new elements... BUT....

I decided instead of making new anonymous functions to add into my eventlisteners... I want to create a new eventlistener with a function declaration. Here's what I have for code for that given function. 

   function newFunction() {
parent[11].appendChild(newLi);
newLi.appendChild(newA);
newA.innerHTML = '<a>DUDE!</a>';
};

now here's what I have for my event listener now. 

newLink.addEventListener('mouseover', newFunction(){
                         });

but I have an error because there's nothing in my arguments. At least, that's what I'm assuming is the case.. here's the error I have.

Uncaught SyntaxError: missing ) after argument list

Any takers...?? What happened with my code?

Upvotes: 0

Views: 1719

Answers (3)

AdamB
AdamB

Reputation: 41

Your eventListener target should just be mouseover and not onmouseover

 onMouseOver.addEventListener('mouseover', function() {

Reference here. Also, I would have some reservations about using an actual event name as a variable - you may want to change that

Edit to your edit

If you're using a named function, remove the parentheses from your eventlistener function call:

newLink.addEventListener('mouseover', newFunction);

function newFunction(){
//code
}

Upvotes: 1

Jason
Jason

Reputation: 118

Your addEventListener should be more like this,

onMouseOver.addEventListener('mouseover', function() {
    ...Your Code...
});

Upvotes: 1

Asif Raza
Asif Raza

Reputation: 3695

var lists = document.querySelectorAll(".work li"), 
    doSomething = function() {
        [].map.call(lists, function(elem) { elem.classList.remove("active") });
        this.classList.add("active");
    };
[].map.call(lists, function(elem) {
    elem.addEventListener("mouseover", doSomething, false);
});
li { cursor: pointer; }
.active { background-color: yellow; }
<ul class="work"><li>One</li><li>Two</li><li>Three</li></ul>
<ul class="work"><li>Four</li><li>Five</li><li>Six</li></ul>

Upvotes: 0

Related Questions