How to trigger event listeners through javascript

Question

I have 2 buttons (1 submit and 1 reset). I want to trigger the following events: onmousedown,onmouseup,onmouseover and onmouseout. I tested my code but it is not working :/. Would you mind helping me to fix it? HTML:

<div class="buttonwrap">
    <div id="eventlisten1">
        <input type="submit" value="Submit" name="submit" />
    </div>
    <div class="eventlisten2">
        <input type="reset" value="Reset" name="reset" />
    </div>
</div>

Javascript:

function mDown(obj) {
    obj.value = "Submitted!"
}

function mUp(obj) {
    obj.value = "Thank you!"
}

function mOver(obj) {
    obj.style.backgroundColor = "blue";
}

function mOut(obj) {
    obj.style.backgroundColor = "yellow";
}

function eListeners() {
    var eventlisten1 = document.getElementByClassName('eventlisten1');
    var eventlisten2 = document.getElementByClassName('eventlisten2');
    eventlisten1.addEventListener('mousedown', mDown, false);
    eventlisten1.addEventListener('mouseup', mUp, false);
    eventlisten2.addEventListener('mouseover', mOver, false);
    eventlisten2.addEventListener('mouseout', mOut, false);
}

window.onload = eListeners();

CSS (for some styling):

.buttonwrap {
    position:absolute;
    z-index:0;
    width:200px;
    background:#ccc;
}
input[type=submit] {
    padding:10px;
    margin:10px 0px 0px -1px;
    width:90px;
    background-color:#00ff00;
    float:left;
    border-radius:5px;
}
input[type=reset] {
    padding:10px;
    margin:10px 0px 0px 15px;
    width:90px;
    background-color:red;
    float:left;
    border-radius:5px;
}

Here is a fiddle of it: http://jsfiddle.net/mf2xD/2/ I will rep those nice people who help me out :) Thank you!

Do you really mean to use the word "trigger"? To "trigger" an event is to cause the event to happen; your code just establishes some event handlers. — Pointy
– Pointy, Commented Dec 1, 2013 at 20:56
That still does not make complete sense. Do you want to establish code that happens when the events naturally happen as a result of user activity? Or do you want to set up the handlers and force the browser to generate the events? — Pointy
– Pointy, Commented Dec 1, 2013 at 21:00
"Do you want to establish code that happens when the events naturally happen as a result of user activity?" - This, yep. I want to make those events happen but through addEventListener instead of adding the events in html — Stoyan
– Stoyan, Commented Dec 1, 2013 at 21:04
OK, well that's not what "trigger" means. So - the code you've got has errors. You should always have the developer console open. If there are errors, the code's not going to do anything. In this case, a big problem is that there's no function called "getElementByClassName", and your elements don't have classes anyway. You're looking for "getElementById". — Pointy
– Pointy, Commented Dec 1, 2013 at 21:06

linstantnoodles · Accepted Answer · 2013-12-12 16:59:12Z

3

Well, for one, you're using getElementByClassName() when the element doesn't even have a class:

var eventlisten1 = document.getElementByClassName('eventlisten1'); // This one has no class
var eventlisten2 = document.getElementByClassName('eventlisten2');

Second problem is mispelling. getElement should be plural if you're fetching based on class.

Try this:

var elTwo = document.getElementsByClassName('eventlisten2')[0];

The above should return the first matched element with class eventlisten2.

Third problem is that there is no obj parameter being passed to your callback. You need to reference this So your listeners should look like this:

function mDown() {
    this.value = "Submitted!";
}

However, this.value actually won't work, because this refers to the div element (it's what you attached your handler to).

Three ways around this:

Attach your handlers to your input elements instead of the divs.
Get the input elements once your handler is called.
Get the input elements before your set your handlers, and pass the elements as a parameter to your handlers.

FIDDLE

edited Dec 12, 2013 at 16:59

answered Dec 1, 2013 at 20:59

linstantnoodles

4,4101 gold badge25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stoyan Over a year ago

Well the first listener was misspelled bad (I fixed it) but still it does not work.

Stoyan Over a year ago

Did you mean something like this: jsfiddle.net/mf2xD/2 ? I updated but still the functions cannot be loaded when the button is clicked.

Stoyan Over a year ago

The input value attribute does not change though?

Pointy · Accepted Answer · 2013-12-01 20:54:00Z

2

window.onload = eListeners();

should be

window.onload = eListeners;

You need to make the "onload" handler be the function itself, not the result of calling the function.

Now, that said, your question talks about triggering the events. The code you've got just establishes the event handlers.

answered Dec 1, 2013 at 20:54

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

How to trigger event listeners through javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related