Develop Reference

Video 'ended' .addEventListener no working

I worked on building this template using the javascript and I can't seem to get the video I have on the screen to activate an event once the video finishes. The page content is pulled in via JSON file. The "videoDemo1" is set to autoplay, so I hope I'm not call the eventListener before the video exist in the HTML document. If there's any questions, just ask, thanks. Here's my code:
function buildVideoContent(pageData) {
// build the layout
let layout = buildColumns(pageData.layout);
// get page container from DOM
let page = document.getElementById('page_frame');
// clear the page frame
page.innerHTML = "";
// main video container
let mainVidCont = document.createElement('div');
mainVidCont.id = "main-cont";
mainVidCont.classList.add('bg-height');
page.appendChild(mainVidCont);
// add video wrapper and video content (start video and end video)
let vidWrapper = document.createElement('div');
vidWrapper.id = "vDemoWrapper";
vidWrapper.classList.add('vid-wrapper-bg');
vidWrapper.innerHTML = "<video id='videoDemo1' controls autoplay muted loop class='video-bg'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video><video id='videoDemo2' controls loop class='video-bg btn-hide'><source src='assets/media/0010.mp4' type='video/mp4'>Your browser does not support the video tag.</video>";
mainVidCont.appendChild(vidWrapper);
// create the containers for content and buttons
for(let i = 1; i <= 10; i++){
let innerContent = document.createElement('div');
innerContent.id = "aniContentInfo" + i + "";
innerContent.classList.add('inner-cont');
//innerContent.classList.add('animation-fadein');
innerContent.classList.add('col-4');
innerContent.classList.add('float-left');
mainVidCont.appendChild(innerContent);
}
let sumDiv1 = document.getElementById('aniContentInfo1');
let sumDiv2 = document.getElementById('aniContentInfo2');
let sumDiv3 = document.getElementById('aniContentInfo3');
let sumDiv4 = document.getElementById('aniContentInfo4');
let sumDiv5 = document.getElementById('aniContentInfo5');
let sumDiv6 = document.getElementById('aniContentInfo6');
let sumDiv7 = document.getElementById('aniContentInfo7');
let sumDiv8 = document.getElementById('aniContentInfo8');
let sumDiv9 = document.getElementById('aniContentInfo9');
let sumDiv10 = document.getElementById('aniContentInfo10');
let viewerText1 = buildContentCard(pageData.content1.text_elements, false);
let viewerText2 = buildContentCard(pageData.content2.text_elements, false);
let viewerText3 = buildContentCard(pageData.content3.text_elements, false);
let viewerText4 = buildContentCard(pageData.content4.text_elements, false);
let viewerText5 = buildContentCard(pageData.content5.text_elements, false);
let viewerText6 = buildContentCard(pageData.content6.text_elements, false);
let viewerText7 = buildContentCard(pageData.content7.text_elements, false);
let viewerText8 = buildContentCard(pageData.content8.text_elements, false);
let viewerText9 = buildContentCard(pageData.content9.text_elements, false);
let viewerText10 = buildContentCard(pageData.content10.text_elements, false);
sumDiv1.appendChild(viewerText1);
sumDiv2.appendChild(viewerText2);
sumDiv3.appendChild(viewerText3);
sumDiv4.appendChild(viewerText4);
sumDiv5.appendChild(viewerText5);
sumDiv6.appendChild(viewerText6);
sumDiv7.appendChild(viewerText7);
sumDiv8.appendChild(viewerText8);
sumDiv9.appendChild(viewerText9);
sumDiv10.appendChild(viewerText10);
// create buttons and add them to content container
for(let v = 1; v <= 10; v++){
let continueBtn = document.createElement('BUTTON');
continueBtn.id = "continue-btn" + v + "";
continueBtn.classList.add('btn-primary');
continueBtn.classList.add('btn');
continueBtn.innerHTML = "CONTINUE";
let paraCont = document.getElementById("aniContentInfo" + v + "");
paraCont.appendChild(continueBtn);
for(let c = 1; c <= 9; c++){
let count = document.getElementById("aniContentInfo" + c + "");
count.classList.add('btn-hide');
}
if(v = 10){
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
}
};
// THE CODE COMMENTED OUT BELOW ARE ADDITIONAL EVENTLISTENERS THAT I'VE TRIED
/* document.addEventListener('DOMContentLoaded', () => {
var vid = document.getElementById("videoDemo1");
vid.onended = function() {
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
};
if ( video.readyState === 4 ) {
let vid = document.getElementById('videoDemo1');
vid.addEventListener("ended", function(e){
if(state === 0){
let videoElement = document.getElementById('videoDemo1');
videoElement.classList.add('vid-opacity');
}
});
}
}); */
// BELOW IS WHERE I WROTE THE ADDEVENTLISTENER
document.getElementById('videoDemo1').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
document.getElementById("aniContentInfo10").classList.add('animation-fadein');
};
// APPARENTLY THIS DOESN'T WORK WHEN I RUN THE CODE
// create click events for each button to proceed to next content container
for(let h = 1; h <= 10; h++){
continueBtn = document.getElementById('continue-btn' + h + '');
document.getElementById('continue-btn' + h + '').addEventListener("click", function userProgression(e){
let subOne = h - 1;
let videoElement = document.getElementById('videoDemo1');
videoElement.classList.remove('vid-opacity');
videoElement.classList.add('vid-visible');
let videoElement2 = document.getElementById('videoDemo2');
videoElement2.classList.remove('btn-hide');
videoElement2.classList.add('btn-show');
// remove button and content from screen to reveal new content container
setTimeout(function(){
let hMinus = h - 1;
let contentInnerNum = document.getElementById('aniContentInfo' + h + '');
contentInnerNum.classList.remove('btn-hide');
contentInnerNum.classList.remove('animation-fadein');
contentInnerNum.classList.add('animation-fadeout');
if(hMinus !== 0){
let contentNumMinus = document.getElementById('aniContentInfo' + hMinus + '');
contentNumMinus.classList.remove('btn-hide');
contentNumMinus.classList.add('animation-fadein');
contentNumMinus.classList.remove('animation-fadeout');
}
let contentBtn = document.getElementById('continue-btn' + h + '');
contentBtn.classList.add('animation-fadeout');
let contentInner = document.getElementById('continue-btn' + subOne + '');
contentInner.classList.remove('btn-hide');
contentInner.classList.remove('btn-show');
contentInner.classList.add('btn-center');
}, 3000);
// add classes to content elements from the above lines to to remove them completely
setTimeout(function(){
let topBtn = document.getElementById('continue-btn' + h + '');
topBtn.classList.add('btn-hide');
let contentInner = document.getElementById('aniContentInfo' + h + '');
contentInner.classList.add('btn-hide');
}, 6000);
// set timer to make next second video visible.
setTimeout(function(){
let hMinus = h - 1;
if(hMinus !== 0){
let videoElement1a = document.getElementById('videoDemo1');
videoElement1a.classList.remove('vid-opacity');
videoElement1a.classList.add('vid-visible');
}
let videoElement2 = document.getElementById('videoDemo2');
videoElement2.classList.remove('btn-show');
videoElement2.classList.add('btn-hide');
}, 8000);
// important! bring back original first video at the exact second the second video ends
setTimeout(function(){
let videoElement1b = document.getElementById('videoDemo1');
videoElement1b.classList.remove('vid-visible');
videoElement1b.classList.add('vid-opacity');
}, 60000);
});
}
// I ALSO TRIED PLACING THE EVENTLISTENER HERE, BUT NO LUCK
/* document.addEventListener("DOMContentLoaded", function(event) {
let vid1 = document.getElementById("videoDemo1");
if ( vid1.readyState === 4 ) {
vid1.onended = () => {
vid1.classList.add('vid-opacity');
};
}
});*/
}
If it's something I'm missing, any help would be appreciated, thanks

Reset values Issue

Building a dice game and you get 3 rolls. Once you finish your turn i'm trying to have a "reset" button that will reset the values back to the original spot so the "next person" can play. The values reset as I expected but when I "roll" none of the functions are taking place and i'm pretty new in js so i'm not sure what the problem is.
var playerScore = document.getElementById('firstPlayerScore');
var rollButton = document.getElementById('roll_button');
var dice1 = new dice(1);
var dice2 = new dice(2);
var dice3 = new dice(3);
var dice4 = new dice(4);
var dice5 = new dice(5);
var diceArray = [dice1, dice2, dice3, dice4, dice5];
var cargo = 0;
var numOfRolls = 0;
var cargoButton = document.getElementById('cargo');
var canHaveCargo = false;
function restart(){
dice1 = new dice(1);
dice2 = new dice(2);
dice3 = new dice(3);
dice4 = new dice(4);
dice5 = new dice(5);
diceArray = [dice1, dice2, dice3, dice4, dice5];
cargo = 0;
numOfRolls = 0;
canHaveCargo = false;
addGlow();
updateDiceImageUrl();
document.getElementById("dice1").classList.remove('glowing');
document.getElementById("dice2").classList.remove('glowing');
document.getElementById("dice3").classList.remove('glowing');
document.getElementById("dice4").classList.remove('glowing');
document.getElementById("dice5").classList.remove('glowing');
}
//dice object
function dice(id){
this.id = id;
this.currentRoll = 1;
this.previousRoll = 1;
this.isSelected = false;
this.diceImageUrl = "img/dice/dice1.png";
this.roll = function(){
this.previousRoll = this.currentRoll;
this.currentRoll = getRandomRoll(1, 6);
}
}
//returns an array of all dice that are not currently selected so they can be rolled.
function getRollableDiceList(){
var tempDiceList = [];
for(var i = 0; i < diceArray.length; i++){
if(!diceArray[i].isSelected){
tempDiceList.push(diceArray[i]);
}
}
return tempDiceList;
}
// gets a random number between min and max (including min and max)
function getRandomRoll(min,max){
return Math.floor(Math.random() * (max-min + 1) + min);
}
// calls the roll function on each dice
function rollDice(rollableDiceList){
for(var i = 0; i < rollableDiceList.length; i++){
rollableDiceList[i].roll();
}
}
// updates each dice with the new url for the image that corresponds to what their current roll is
function updateDiceImageUrl(){
for(var i = 0; i < diceArray.length; i++){
var currentDice = diceArray[i];
currentDice.diceImageUrl = "http://boomersplayground.com/img/dice/dice" + currentDice.currentRoll + ".png";
//update div image with img that cooresponds to their current roll
updateDiceDivImage(currentDice);
}
}
//Displays the image that matches the roll on each dice
function updateDiceDivImage(currentDice) {
document.getElementById("dice"+currentDice.id).style.backgroundImage = "url('" + currentDice.diceImageUrl +"')";
}
// returns an array of all
function getNonSelectedDice(){
var tempArray = [];
for(var i = 0; i < diceArray.length; i++){
if(!diceArray[i].isSelected){
tempArray.push(diceArray[i]);
}
tempArray.sort(function(a, b){
return b.currentRoll - a.currentRoll;
});
}
return tempArray;
}
function getSelectedDice(){
var selectedDice = [];
for(var i = 0; i < diceArray.length; i++){
if(diceArray[i].isSelected){
selectedDice.push(diceArray[i]);
}
}
return selectedDice;
}
//boolean variables
var shipExist = false;
var captExist = false;
var crewExist = false;
//checks each dice for ship captain and crew. Auto select the first 6, 5 , 4.
function checkForShipCaptCrew(){
//array of dice that are not marked selected
var nonSelectedDice = getNonSelectedDice();
for(var i = 0; i < nonSelectedDice.length; i++){
//temp variable that represents the current dice in the list
currentDice = nonSelectedDice[i];
if (!shipExist) {
if (currentDice.currentRoll == 6) {
shipExist = true;
currentDice.isSelected = true;
}
}
if (shipExist && !captExist) {
if (currentDice.currentRoll == 5) {
captExist = true;
currentDice.isSelected = true;
}
}
if (shipExist && captExist && !crewExist) {
if (currentDice.currentRoll == 4) {
crewExist = true;
currentDice.isSelected = true;
canHaveCargo = true;
}
}
}
}
function addGlow(){
var selectedDice = getSelectedDice();
for (var i = 0; i < selectedDice.length; i++){
var addGlowDice = selectedDice[i];
var element = document.getElementById('dice' + addGlowDice.id);
element.className = element.className + " glowing";
}
}
function getCargo(){
var cargo = 0;
var moreDice = getNonSelectedDice();
if (canHaveCargo){
for(var i=0; i < moreDice.length; i++){
cargo += moreDice[i].currentRoll;
playerScore.innerHTML = 'You have got ' + cargo + ' in ' + numOfRolls + ' rolls!';
}
} else {
alert("You don't have Ship Captain and the Crew yet!");
}
}
rollButton.addEventListener('click', function(){
//generate rollable dice list
if (numOfRolls < 3) {
var rollableDiceList = getRollableDiceList();
//roll each dice
rollDice(rollableDiceList);
//update dice images
updateDiceImageUrl();
getNonSelectedDice();
// //auto select first 6, 5, 4 (in that order)
checkForShipCaptCrew();
addGlow();
// //adds a red glow to each dice that is selected
numOfRolls++;
}
});
cargoButton.addEventListener('click', getCargo);
var startButton = document.getElementById('restart');
startButton.addEventListener('click', restart);
http://boomer1204.github.io/shipCaptainCrew/
Here is a link to the live game since it's the only way I can describe the problem since I don't know what's not working. If you roll the dice a couple times the dice will get a blue border and be "saved" according to the rules. Now after you hit th restart button that doesn't happen anymore.
Thanks for the help in advance guys

Just add this to your restart()
function restart(){
...
shipExist = false;
capExist = false;
crewExist = false;
...
}

It's hard to replicate without a fiddle, but it seems that you are adding and removing the 'glowing' class using separate processes. Have you tried adding the glowing class the same way you are removing it?
element.classList.add("glowing")
See an example within a fiddle: https://jsfiddle.net/5tstf2f8/

Link rotating images in existing javascript

its been a while since I've dug my heals into JS and could use some help. Looking to modify this existing script to include a link for each rotating image... want to link the object called "text" to the same URL for each image. any ideas?
//cur_index = 1;
cur_index = Math.floor(Math.random()*6);
//var randomnumber=Math.floor(Math.random()*11)
num_image = 5;
//alert(cur_index);
interval = 300000; // 5min between rotations
function rotate(){
// if(cur_index > num_image)
// cur_index = 1;
if(cur_index == 0)
cur_index = 1;
var imag,text;
if(document.getElementById){
imag = document.getElementById("faceImage");
text = document.getElementById("faceText");
}else if(document.all) {
imag = document.all["faceImage"];
text = document.all["faceText"];
}else if(document.layers){
imag = document.layers["faceImage"];
text = document.layers["faceText"];
}
var imageUrl = "/path/face" + cur_index + ".jpg";
var textUrl = "/path/face" + cur_index + "_text.gif";
imag.src = imageUrl;
text.src = textUrl;
//cur_index++;
cur_index = Math.floor(Math.random()*6);
setTimeout('rotate()',interval);
}

Stop div from adding on every click

I have a table with a background image that, when clicked, displays other images for the user to choose from. This is working and appears or hides on click events. However, when the user clicks to add a second image the menu of images appears again (as it should) but twice. I have commented out a solution I tried. I thought on first click I could display my_div and then delete it in allImages.onclick. This is throwing up a null error in Chrome, probably understandably. The problem here is similar. Hope I added link correctly. Anyway, advice or help appreciated.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);

I modified your code adding ul to hold all img. It works, but could be better.
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
var myImages = new Array();
myImages[0] = "../www/images/TEST1.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST3.png";
var container = document.createElement("ul"); //ul to simplify hide/show
container.style.display = "none";
for (var i = 0; i < myImages.length; i++) {
var newList = document.createElement("li");
var im = document.createElement("img");
im.src = myImages[i];
newList.appendChild(im);
im.onclick = function () {
img.src = this.src;
};
container.appendChild(newList);
}
col.appendChild(container);
col.onclick = function () {
if (container.style.display == "none")
container.style.display = "block";
else
container.style.display = "none";
};
}

Dynamic creation of HTML5 Videos via JavaScript

what I want to do is to display videos which differ in their number.
I do know that I have to use appendChild, but I have no clue how and I couldn't find anything helpful so far.
I'd really apreciate it if someone could give me a hint how to do this.
[UPDATE]
Ok .. I have my basic function now, but I still have one little problem. I need to place the videowindows below each other. I have an idea how to do that, but I'm not quite sure if its possible the way I want to do it. I want to use the top attribute of the last video and sum it up by some static value:
<script type="text/javascript">
var myVideo;
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
var myVideo = new Array();
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
tempVideo.style.top = myVideo[i-1]+"300px";
} else{
tempVideo.style.top = "20px";
};
}
</script>
[UPDATE 2]
Ok .. I found a way to solve my problem, but now I have another: The videowindows are not visible which has something to do with the video element being created via JS... no clue how to solve this. Strange enough if I set the video to load and play I do hear the audio from the video ..
<script type="text/javascript">
var myVideo = new Array();
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
tmpTop = parseInt(tmpTop);
tmpTop += 300;
tempVideo.style.top = tmpTop;
} else{
tempVideo.style.top = "20px";
};
}
</script>
[UPDATE 3]
Ok .. I simply forgot the appendChild function. :)
<script type="text/javascript">
var myVideo = new Array();
var i;
//Funktion zum Videoaufruf
function getVideo(){
var mp4Array = new Array();
var ogvArray = new Array();
mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";
for(i = 0; i < mp4Array.length; i++){
myVideo[i] = document.createElement("video");
if(Modernizr.video){
if(Modernizr.video.ogg){
//Firefox, Opera, Chrome
myVideo[i].src = ogvArray[i];
setVideoOptions(myVideo[i], i);
}else if(Modernizr.video.h264){
//Safari, Chrome, IE, IPhone, Android
myVideo[i].src = mp4Array[i];
setVideoOptions(myVideo[i]);
}
}else{
alert("HTML5 Video-Tag wird nicht unterstützt");
}
};
}
function setVideoOptions(tempVideo, i){
tempVideo.controls = true;
tempVideo.style.position = "absolute";
tempVideo.style.left = "650px";
tempVideo.style.width = "360";
tempVideo.style.height = "240";
if (i>0) {
var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
tmpTop = parseInt(tmpTop);
tmpTop += 300;
tempVideo.style.top = tmpTop;
} else{
tempVideo.style.top = "20px";
};
document.body.appendChild(tempVideo);
}
</script>