Develop Reference

JavaScript not working for all HTML pages

I am working on the tablet's display of a Pepper robot; I have a functional HTML index page comprising a list of questions—each question redirects to its respective HTML when clicked on—, 2 volume buttons and 2 other buttons—one that pops up an instruction image and the other one that closes the index page and gets back to the splash screen, which when clicked upon, reveals the index page. So far everything is working. The issue is that when I click a question—I get redirected to its HTML page, but then I get stuck there, as neither the 2 volume buttons nor the 2 other buttons work;
I made sure to include the following in each HTML page:
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
I also reused the same JavaScript functions that worked for the index page.
I commented out some line:
btnPrevious.addEventListener('click', goToPreviousPage);
because I noticed it prevented the splash screen from disappearing when clicked on—i.e., the visibility attribute stays on visible instead of switching to hidden thus revealing the index page, but still, the 3 remaining buttons don't work anyway.
Here is my faq.js code:
/* global QiSession */
var serviceName = 'ADFAQ';
var volumeUpEvent = serviceName + '/VolumeUp';
var volumeDownEvent = serviceName + '/VolumeDown';
var volumeData = serviceName + '/Volume';
/* Clickable buttons */
var btnReturn = document.getElementById('return');
var btnHelp = document.getElementById('call_help');
var btnPrevious = document.getElementById('previous_page');
var btnVolUp = document.getElementById('volume-up');
var btnVolDown = document.getElementById('volume-down');
/* Help image and splash screen */
var helper = document.getElementById('helper');
var img = document.getElementById('click_on_me');
var memory;
var volume;
var audioDevice;
QiSession(connected, disconnected);
function connected (s) {
console.log('QiSession connected');
var questions = document.getElementById('questions');
/* Associating buttons to their respective functions */
btnHelp.addEventListener('click', showHelper);
btnReturn.addEventListener('click', closeQuestions);
//btnPrevious.addEventListener('click', goToPreviousPage);
btnVolUp.addEventListener('click', raiseVolume);
btnVolDown.addEventListener('click', lowerVolume);
img.addEventListener('click', loadQuestions);
questions.addEventListener('click', clickOnQuestion);
s.service('ALMemory').then(function (m) {
m.subscriber(serviceName + '/DialogEnded').then(function (subscriber) {
subscriber.signal.connect(hideQuestions);
});
m.subscriber(serviceName + '/Pepper').then(function (subscriber) {
subscriber.signal.connect(displayPepperHTML)
});
m.subscriber(serviceName + '/RaiseVolume').then(function (subscriber) {
subscriber.signal.connect(raiseVolume);
});
m.subscriber(serviceName + '/LowerVolume').then(function (subscriber) {
subscriber.signal.connect(lowerVolume);
});
memory = m;
});
s.service('ALAudioDevice').then(function (a) {
a.getOutputVolume().then(assignVolume);
audioDevice = a
});
}
function disconnected () {
console.log('QiSession disconnected');
}
function assignVolume(value){
volume = value;
}
function raiseVolume (event) {
var changed = 0;
if(volume < 100) {
volume = Math.min(volume + 5, 100);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeUpEvent, changed);
}
function lowerVolume (event) {
var changed = 0;
if(volume > 30) {
volume = Math.max(volume - 5, 0);
audioDevice.setOutputVolume(volume);
changed = 1;
}
memory.insertData(volumeData, volume);
memory.raiseEvent(volumeDownEvent, changed);
}
function showHelper (event) {
if (btnHelp.innerHTML === '?') {
helper.style.opacity = '1';
helper.style.zIndex = '1';
btnHelp.innerHTML = '←';
} else {
helper.style.opacity = '0';
helper.style.zIndex = '-1';
btnHelp.innerHTML = '?';
}
btnHelp.blur();
}
function loadQuestions (event) {
memory.raiseEvent(serviceName + '/LoadQuestions', 1);
img.style.visibility = 'hidden';
}
function goToPreviousPage () {
window.location.href = "index.html";
}
function displayPepperHTML() {
window.location.href = "pepper.html";
}
function closeQuestions (event) {
if(location.href != "index.html")
{window.location.href = "index.html";}
memory.raiseEvent(serviceName + '/CloseQuestions', 1);
btnReturn.blur();
}
function hideQuestions (data) {
if (data !== 0) {
img.style.visibility = 'visible';
helper.style.opacity = '0';
btnHelp.innerHTML = '?';
}
}
function clickOnQuestion (event) {
memory.raiseEvent(serviceName + '/' + event.target.id, 1);
}
Here is my non-functioning pepper.html code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Pepper</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1280, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/faq.css" />
</head>
<body>
<header>
<h1>Bla bla bla</h1>
<span class="buttons">
<button id="previous_page" class="button-help"> ← </button>
<button id="return" class="button-return">X</button>
</span>
<div id="helper" class="pop-up">
<img src="img/interactionscreen_frf.png" alt="Bla bla bla">
</div>
</header>
<ul id="questions">
<p>
Bla bla bla
</p>
<div class="volume-part">
<div id="volume-up" class="Click-me">+</div>
<img src="img/speaker.png" alt="Bla bla bla" style="vertical-align: middle;">
<div id="volume-down" class="Click-me">-</div>
</div>
</ul>
<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>
</body>
</html>
Thank you for your help.
I am expecting the pepper.html page to respond to both the volume and ← and X buttons, as the index.html should, since they use the exact same Javascript.

I was able to find some workaround: creating one JavaScript file for each HTML page, this is redundant and non-optimal I know, but at least it works.
This also made me realize that the commented-out line was blocking the program because the index.html page doesn't use the previous_page button, that's what led me to make a JS file for each HTML page.
If anybody has any other suggestions I am all ears.
Edit: I reduced the number of JS scripts to only 2. One for the index.html and the other for the identically-structured html pages of the other questions.

Some issues with an image carousel (JavaScript)

I'm making a image carousel to get some more experience.
I have an acf gallery in the back-end where i add my images.
This is the code that i use here:
<div class="images">
<img id="carousel_images_top" src="" alt="">
<div class="top_button next">Next</div>
<div class="top_button prev">Prev</div>
</div>
<script>
var imageList = [];
<?php
$images = get_field('image_carousel');
foreach($images as $img) {
echo "imageList.push('" . $img['url'] . "');";
}
?>
var imageTag = document.querySelector('#carousel_images_top');
imageTag.src = imageList[0];
function next() {
console.log(imageTag.src)
var curIndex = imageList.indexOf(imageTag.src);
imageTag.src = imageList[(curIndex+1) % imageList.length];
};
function prev() {
console.log(imageTag.src)
var curIndex = imageList.indexOf(imageTag.src);
imageTag.src = imageList[(curIndex-1 + imageList.length) % imageList.length];
};
document.querySelector('.next').addEventListener('click', next);
document.querySelector('.prev').addEventListener('click', prev);
</script>
I can see the first image in the array, and i can go back one to see the last one, but I can't go more than one back, and then forward to the first one again.
I do not get any errors at all, and I have tried to find out where the error is, but in the array, all of my 6 images is listed and the buttons are working.
I'm guessing there is an error in the curIndex variable, but I can't realy see what.
Anyone that can have a quick look and point me in the right direction?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<div class="images">
<img id="carousel_images_top" src="" alt="">
<p>Current Index: <span id="currentindex"></span></p>
<div class="top_button next">Next</div>
<div class="top_button prev">Prev</div>
</div>
<script>
var imageList = [
'https://tse1-mm.cn.bing.net/th?id=OIP.2bdrFgmVuK6LO0ggJdNPZAHaFP&w=152&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
'https://tse1-mm.cn.bing.net/th?id=OIP.yP3sLQkAOswh1wDZq21NtwHaFj&w=144&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
'https://tse1-mm.cn.bing.net/th?id=OIP.FEUTSwbKW9ndBYzd-oI8OQHaIN&w=99&h=105&c=8&rs=1&qlt=90&dpr=1.5&pid=3.1&rm=2',
];
var imageTag = document.querySelector('#carousel_images_top');
var currentindexTag = document.getElementById('currentindex');
imageTag.src = imageList[0];
function next() {
//console.log(imageTag.src)
var curIndex = imageList.indexOf(imageTag.src);
imageTag.src = imageList[(curIndex+1) % imageList.length];
currentindexTag.innerHTML = curIndex;
};
function prev() {
//console.log(imageTag.src)
var curIndex = imageList.indexOf(imageTag.src);
imageTag.src = imageList[(curIndex-1 + imageList.length) % imageList.length];
currentindexTag.innerHTML = curIndex;
};
document.querySelector('.next').addEventListener('click', next);
document.querySelector('.prev').addEventListener('click', prev);
</script>
</body>
</html>
Follow the code you write, the images replacement does work correctly except the input of images array has same url.
Because the indexOf method returns the first index at which a given element can be found in the array, or -1 if it is not present.
var images = ['1.png', '1.png', '1.png'];
//no matter how many times to execute images.indexOf('1.png'), it's always return 0.
So, the better solution is that replacing of the curIndex with a global number, like below:
var curIndex = 0;
function prev() {
...
curIndex -= 1
}
function next() {
...
curIndex += 1;
}
This solution should be avoiding the problem you meet.
That's an example and it makes some evidences for the correct of your script.
There are two directions to find the problem is. One, to check the images input, and another, try to debug the code in reality environment.

Navigating to specific URL only IF specified ID withing that URL exists

So I have this HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
</head>
<body>
<button id="btn" target="_blank" >CLICK ME</button>
</body>
<script src="js/script.js"></script>
</html>
and this JS code
document.getElementById("btn").onclick = function () {
var test=makeid();
window.open("http://www."+test,'_blank');
};
function makeid()
{
var url = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
for( var i=0; i < 5; i++ )
url += possible.charAt(Math.floor(Math.random() * possible.length));
return url;
}
How to make client jump to this randomly generated URL only if a div(on the page with generated URL) with id="hehe" exists?If it doesn't exist generate URL again.Is it done using AJAX or something else?

Check if shown (randomised) image is the same as last (randomised) image (jQuery & JavaScript )

(Before anything, you should know that my JS skills are very basic)
I'm trying to make my own "rapid sorting" from the game "BrainWars" on smartphones.
Basically what it should do is:
Step 1: randomise one of the 3 pictures available and show the image.
Step 2: if this image is the same as the last one ( do something )
Step 3: If this image is NOT the same as the last one ( do something else )
For now , I have a folder named "images" with 3 png's inside it.
So far I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
var random_images_array = ['1.png', '2.png', '3.png'];
var lastImage = "";
function getRandomImage(imgAr, path) {
path = path || 'images/'; // Default path hier opgeven
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
$(function() {
$('#btn').click(function() {
getRandomImage(random_images_array, 'images/');
setTimeout(function() {
getRandomImage(random_images_array, 'images/');
}, 2000);
});
});
</script>
</head>
<body>
<button id="btn">GO</button>
</body>
</html>
How can one achieve this ?

What about creating a lastImage variable...
var random_images_array = ['1.png', '2.png', '3.png'];
var lastImage="";
Then:
var img = imgAr[num];
if (img==lastImage) {do something}
else {lastImage=img; ... document.write(imgStr);}

Google Feed API for RSS is not showing current events

I am attempting to use Google Feed API to display three current event listings for our homepage. This is to circumvent some of the issues we are having with a third part calendar application.
However, with the feed limit set to 3, the only listings that will show up for me are from Jan. 18. Is there a way to make the code show only current or future events?
Thanks in advance for any help.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
JavaScript
google.load("feeds", "1");
var feedcontainer=document.getElementById("feed");
var feedurl="http://25livepub.collegenet.com/calendars/publishers-calendar-7.rss";
var feedlimit = 3;
var rssoutput = '';
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl);
feedpointer.setNumEntries(feedlimit) ;
feedpointer.load(displayfeed);
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries;
for (var i=0; i<thefeeds.length; i++){
var untrimContent = thefeeds[i].content;
var trimContent = untrimContent.split("<br>", 2);
rssoutput+="<div><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></div>" + trimContent;
feedcontainer.innerHTML=rssoutput;
}
} else {
feedcontainer.innerHTML = "Error Loading Events";
}
}
window.onload=function(){
rssfeedsetup();
};