We Keep Coding

Using addEventListener on multiple elements, avoid TypeError when particular element not found

I'm using two simple addEventListener mouseenter and mouseleave functions respectively to play and stop animations (Bodymovin/SVG animations, though I suspect that fact is irrelevant).
So, the following works fine:
document.getElementById('animationDiv').addEventListener('mouseenter', function(){
animation.play();
})
(The HTML couldn't be simpler: The relevant part is just an empty div placeholder filled by script - i.e., <div id="animationDiv"></div>.
I can place that in the same file as the one that operationalizes the animation code, or I can place it in a separate "trigger" file, with both files (and other others necessary to processing) loaded in the site footer.
The problem arises when I need to be able to set triggers for any of multiple similar animations that may or may not appear on a given page.
If only one of two animatable elements are present on a page, then one of two sets of triggers will throw an error. If the first of two such triggers is not present, then the second one will not be processed, meaning that the animation will fail. Or at least that's what it looks like to me is happening.
So, just to be clear, if I add the following two triggers for the same page, and the first of the following two elements is present, then the animation will play on mouseenter. If only the second is present, its animation won't be triggered, apparently because of the error thrown on the first.
document.getElementById('firstAnimationDiv').addEventListener('mouseenter', function(){
firstAnimation.play();
})
document.getElementById('secondAnimationDiv').addEventListener('mouseenter', function(){
secondAnimation.play();
})
At present I can work around the problem by creating multiple trigger files, one for each animation, and setting them to load only when I know that the animatable element will be present, but this approach would get increasingly inefficient when I am using multiple animations per page, on pages whose content may be altered.
I've looked at try/catch approaches and also at event delegation approaches, but so far they seem a bit complicated for handling this simple problem, if appropriate at all.
Is there an efficient and flexible standard method for preventing or properly handling an error for an element not found, in such a way that subsequent functions can still be processed? Or am I missing something else or somehow misreading the error and the function failure I've been encountering?
WHY I PICKED THE ANSWER THAT I DID (PLUS WORKING CODE)
I was easily able to make the simple, directly responsive answer by Baoo work.
I was unable to make the answers below by Patrick Roberts and Crazy Train work, though no doubt my undeveloped js skills are entirely at fault. When I have the time, or when the issue next comes up for me in a more complex implementation (possibly soon!), I'll take another look at their solutions, and see if I can either make them work or if I can formulate a better question with fully fledged coding examples to be worked through.
Finally, just to make things clear for people who might be looking for an answer on Bodymovin animations, and whose js is even weaker than mine, the following is working code, all added to the same single file in which a larger set of Bodymovin animations are constructed, relieving me of any need to create separate trigger files, and preventing TypeErrors and impaired functionality.
//There are three "lets_talk" animations that can play - "home," "snug," and "fixed"
//and three types of buttons needing enter and leave play and stop triggers
let home = document.getElementById('myBtn_bm_home');
if (home) home.addEventListener('mouseenter', function() {
lets_talk_home.play();
});
if (home) home.addEventListener('mouseleave', function() {
lets_talk_home.stop();
});
let snug = document.getElementById('myBtn_bm_snug');
if (snug) snug.addEventListener('mouseenter', function() {
lets_talk_snug.play();
});
if (snug) snug.addEventListener('mouseleave', function() {
lets_talk_snug.stop();
});
let fixed = document.getElementById('myBtn_bm_fixed');
if (fixed) fixed.addEventListener('mouseenter', function() {
lets_talk_fixed.play();
});
if (fixed) fixed.addEventListener('mouseleave', function() {
lets_talk_fixed.stop();
});
At typical piece of underlying HTML (it's generated by a PHP function taking into account other conditions, so not identical for each button), looks like this at the moment - although I'll be paring away the data-attribute and class, since I'm not currently using either. I provide it on the off-chance that someone sees something significant or useful there.
<div id="letsTalk" class="lets-talk">
<a id="myBtn" href="#"><!-- a default-prevented link to a pop-up modal -->
<div class="bm-button" id="myBtn_bm_snug" data-animation="snug"></div><!-- "snug" (vs "fixed" or "home" is in both instances added by PHP -->
</a>
</div>
Obviously, a more parsimonious and flexible answer could be - and probably should be - written. On that note, correctly combining both the play and stop listeners within a single conditional would be an obvious first step, but I'm too much of a js plodder even to get that right on a first or second try. Maybe later/next time!
Thanks again to everyone who provided an answer. I won't ask you to try to squeeze the working solution into your suggested framework - but I won't ask you not to either...

Just write your code so that it won't throw an error if the element isn't present, by simply checking if the element exists.
let first = document.getElementById('firstAnimationDiv');
if (first) first.addEventListener('mouseenter', function() {firstAnimation.play();});

You could approach this slightly differently using delegated event handling. mouseover, unlike mouseenter, bubbles to its ancestor elements, so you could add a single event listener to an ancestor element where every #animationDiv is contained, and switch on event.target.id to call the correct play() method:
document.getElementById('animationDivContainer').addEventListener('mouseover', function (event) {
switch (event.target.id) {
case 'firstAnimationDiv':
return firstAnimation.play();
case 'secondAnimationDiv':
return secondAnimation.play();
// and so on
}
});
You could also avoid using id and use a more semantically correct attribute like data-animation as a compromise between this approach and #CrazyTrain's:
document.getElementById('animationDivContainer').addEventListener('mouseover', function (event) {
// assuming <div data-animation="...">
// instead of <div id="...">
switch (event.target.dataset.animation) {
case 'first':
return firstAnimation.play();
case 'second':
return secondAnimation.play();
// and so on
}
});

First, refactor your HTML to add a common class to all of the placeholder divs instead of using unique IDs. Also add a data-animation attribute to reference the desired animation.
<div class="animation" data-animation="first"></div>
<div class="animation" data-animation="second"></div>
The data- attribute should have a value that targets the appropriate animation.
(As #PatrickRobers noted, the DOM selection can be based on the data-animation attribute, so the class isn't really needed.)
Since your animations are held as global variables, you can use the value of data-animation to look up that variable. However, it would be better if they weren't global, but were rather in a common object.
const animations = {
first: null, // your first animation
second: null, // your second animation
};
Then select the placeholder elements by class, and use the data attribute to see if the animation exists, and if so, play it.
const divs = document.querySelectorAll("div.animation");
divs.forEach(div => {
const anim = animations[div.dataset.animation];
if (anim) {
anim.play(); // Found the animation for this div, so play it
}
});
This way you're guaranteed only to work with placeholder divs that exist and animations that exist.
(And as noted above, selection using the data attribute can be done const divs = document.querySelectorAll("div[data-animation]"); so the class becomes unnecessary.)

Javascript: Page reloads with eventListener click

In trying to understand javascript best practices, I'm attempting to recreate a piece of inline javascript by adding an event listener from an external javascript file.
The inline code works fine and looks like this:
<p id="inline" align="left">
This is a body paragraph which changes alignment
when a user clicks on a link below
</p>
<p>
Align Right
</p>
Concerning my problem, the important thing to note here is that return false; prevents the page from reloading (I'm not actually sure why, and wouldn't mind finding out, especially if it relates to the solution to my problem...). This is what I want. I don't need the page to reload to move the text to the right.
However, I have no idea what the best way to keep the page from reloading is when my javascript is in an external file. Here's what my first attempt looks like. I started with html that looks like this:
<p id="external" align="left">
This is a body paragraph which changes alignment
when a user clicks on a link below. It uses an
external .js file.
</p>
<p>
Align Right
</p>
And javascript that looks like this:
function alignListener () {
document.getElementById('external').setAttribute('align', 'right');
}
function installListeners () {
var aRight = document.getElementById('aRight');
aright.addEventListener('click', alignListener, false);
}
This almost works, but not at all how I would expect. When I click on the 'Align Right' link, the text briefly aligns right, but then, I follow the link to the current page, which resets the alignment back to the left.
I found a way to sort of fix that problem, by using <a href="#" ... instead of <a href="" .... While this doesn't reload the page (so the text stays aligned), it does take me to the top, which isn't really what I want. I'd like a solution similar to the return false; that works with the inline javascript. Is there a simple way to do this? Or am I doing it wrong completely?

I highly recommend the mozilla developer network for most of these types of answers. It's easy to read and will help you understand JavaScript and the DOM. (JavaScript is good!, DOM is awkward...)
Specifically, for events: https://developer.mozilla.org/en/DOM/event
In general, https://developer.mozilla.org/
There are a few ways to stop events, preventDefault(), stopPropagation(), return false;, or use a JavaScript framework as suggested above. jQuery is good, there are many many others out there (YUI, Dojo, MooTools, etc.), and they all endeavor to make your JavaScript more compatible with different browsers.

Use <button> instead of <a> tag.
That helped me.

You can use:
function event(e){
var e=window.event||e;
//do stuff
if(e.preventDefault){e.preventDefault()}else{e.returnValue=false}
}
Note that this doesn't need to go on a new function: .addEventListener("click",function(e){/*the above function*/})
Cross-compatible event listener:
if(element.addEventListener){
element.addEventListener(eventName, function, false);
}else{
element.attachEvent("on"+eventName, function);
}

Javascript not working IE 8 on Windows

I have 4 images that I use as a navigation menu, when I click on one it lights up (changes image) and the current goes out, and so on so forth.
It works well in chrome and ff (no firebug errors)
But in IE8 the functioning of the clicks (where it changes the view of a div) work it just doesn't change the img src here's the code:
<li id="bulletli1">
<a href="#">
<img id="bullethover1" src="img/bulleto.png" height="30px" width="30px" style="position:absolute">
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png';document.images['bullet4'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
</a></li>
So basically what happens is inside onmousedown this.src gets set to the white bullet and all the others get set to the dark bullet point. There are no errors in the developer's tools.
Does this.src not work in IE8? Any advice would help, Thanks!

please check out, if there doesn't exist more than 1 image with the same name/id-Attribute.
In that case, IE would take the last of the images with the same name(note that document.images['somename'] can be an Array ), while other UserAgents will take the first One.
Maybe in that case you only don't see the change, for example if the changed image is outside the viewport.
greets

You shouldn't be embedding your JS into your code like this. While I advise using a library like jQuery (which will make your life easier), I'll explain without it.
Don't embed your JS into your code. If you really really need to, have it call a function like this:
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="bulletClicked()" style="opacity:0.4;filter:alpha(opacity=40)"/>
Then in your head section between script tags you'll run your javascript:
function bulletClicked() {
this.src='img/bulletwhite.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
}
From what it looks like, you're going about this the wrong way, you're probably putting that onclikc code into every bullet image, slightly modified for each one. Instead, if you just used events you would simplify so much.
If you did something like this... (and specified your height, width, and other CSS in a style section, where they belong, don't do what you did, ever again).
<img id="bullet1" name="bullet1" src="img/bulletwhite.png" onmousedown="bulletClicked(this)"/>
Then your javascript could be...
function bulletClicked(e) {
document.images['bullet1'].src='img/bullet.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
e.src='img/bulletwhite.png';
}
There are much better ways to deal with this sort of problem, and I would highly reccomend you pick up jQuery and do some work with separating your HTML, JavaScript and CSS components of your pages.

I cannot reproduce the described behavior. The images seem to get replaced OK. Any further details you can provide? What happens when you click on the other 3 images? Do they get their image URLs straight?

need dynamic content on page using javascript

I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!

http://fancybox.net/
lightbox, etc...

The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text

This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny

Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.

If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.