I have created an animation for a theme park. My goal is to let the user decide the total amount of tickets they want. For example if they've selected the button with "two persons" two carts ride across the screen. Then a hidden button shows up that redirects them to a new html page where they can pay two tickets. Here is the html page I have at the moment.
First off, this is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Beginscene</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/karretjestest.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<body>
<img id="rideeen" src="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\ride.png">
<div class="allebuttons">
<button class="buttons" TYPE="BUTTON" id="editeen" onclick="changeImage();"><div class="myDIV">1 person</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="saveeen"></div>
<button class="buttons" TYPE="BUTTON" id="edittwee" onclick="changeImagetwee();"><div class="myDIV">2 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savetwee"></div>
<button class="buttons" TYPE="BUTTON" id="editdrie" onclick="changeImagedrie();"><div class="myDIV">3 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savedrie"></div>
<button class="buttons" TYPE="BUTTON" id="editvier" onclick="changeImagevier();"><div class="myDIV">4 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savevier"></div>
</div>
<script src="js/attractie.js"></script>
<script src="js/buttons.js"></script>
</body>
</html>
Now I've got two different Javascript files. The first one contains the following:
function changeImage()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ride.png";
return false;
}
function changeImagetwee()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridetwee.png";
return false;
}
function changeImagedrie()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridedrie.png";
return false;
}
function changeImagevier()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridevier.png";
return false;
}
The second file looks like this:
var editeen = document.getElementById("editeen");
var saveeen = document.getElementById("saveeen");
var edittwee = document.getElementById("edittwee");
var savetwee = document.getElementById("savetwee");
var editdrie = document.getElementById("editdrie");
var savedrie = document.getElementById("savedrie");
var editvier = document.getElementById("editvier");
var savevier = document.getElementById("savevier");
editeen.onclick = function() {
saveeen.style.visibility = "visible";
}
edittwee.onclick = function() {
savetwee.style.visibility = "visible";
}
editdrie.onclick = function() {
savedrie.style.visibility = "visible";
}
editvier.onclick = function() {
savevier.style.visibility = "visible";
}
I've come across the problem that there seem to be only two options:
1: When the buttons with text are clicked the ride is changing to another amount of rides, but the hidden buttons don't work.
2: When the buttons with text are clicked the ride doesn't change, but the hidden buttons work.
Does anyone have a solution for this?
All help is appreciated!
if you wants to change the source of the image then show the link button it's will look like this
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
inp.style.visibility = "visible";
});
or you can send them directly without clicking another button by location
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
window.location.href = "https://example.com/";
});
Related
I am currently attempting to learn Javascript and starting with a very basic incremental game where you click a button and it increases. I implemented a save button that properly saves to local storage, however upon refresh, it gets reset.
This is the local storage after hitting save, however, it gets reset to 0 when the page is refreshed.
I wanted to implement save functionality in the following way (see loadGame() and saveGame()):
// JavaScript Document
var saveState = {
food: 0
};
var GlobalFood = 0;
window.onunload = saveGame();
window.onload = loadGame();
function loadGame(){
var loadSaveStateString = localStorage.getItem('saveState');
saveState = JSON.parse(loadSaveStateString);
}
function saveGame(){
var saveStateString = JSON.stringify(saveState);
localStorage.setItem('saveState', saveStateString);
}
function tutorialFoodBtnFunc() {
var fVal = document.getElementById("GlobalFood");
GlobalFood++;
fVal.innerHTML = GlobalFood;
saveState['food'] = GlobalFood;
}
function tutorialFoodBtnFunc2() {
var fVal = document.getElementById("GlobalFood");
if(GlobalFood < 1)
{
var foodError = document.getElementById("foodErrorText");
foodError.classList.add("fade-in");
setTimeout(function (){
foodError.classList.remove("fade-in");
}, 2000)
}
else
{
GlobalFood--;
fVal.innerHTML = GlobalFood;
saveState.food = GlobalFood;
}
}
Here's my HTML as well if it's relevant:
<html>
<head>
<meta charset="utf-8">
<title>Wilderness</title>
<link rel="stylesheet" href="styling/tutorial.css">
<script src="js/main.js"></script>
</head>
<div id="page-wrapper">
<body>
<div id="nav">
<p class="GlobalVals">Foodstuffs: </p><span class="GlobalVals" id = "GlobalFood">0</span>
</div>
<div id="tutorialBody">
<button id="tutorialFoodBtn" onclick="tutorialFoodBtnFunc()">Gather Berries</button>
<button id="tutorialFoodBtn2" onclick="tutorialFoodBtnFunc2()">Eat Berries</button>
<p id="foodErrorText">You have no berries!!!</p>
<button id="tutorialFoodBtn2" onclick="saveGame()">Save!!</button>
</div>
</body>
</div>
</html>
First of all, onunload and onload should reference a function. (What you did is execute the function)
window.onunload = saveGame;
window.onload = loadGame;
Then, your code is properly loading the saveState, but you're not assigning it to your GlobalFood variable.
function loadGame(){
var loadSaveStateString = localStorage.getItem('saveState');
saveState = JSON.parse(loadSaveStateString);
GlobalFood = saveState.food;
var fVal = document.getElementById("GlobalFood");
fVal.innerHTML = GlobalFood;
}
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.
I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:
<html>
<head>
</head>
<body>
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'http://www.google.com/search?q=' + one;
window.location = two;
}
</script>
</body>
</html>
My code doesn't work
When it runs, this pops up:
(Image of my code running)
Is my code wrong?
Any help will be aapreciated.
EDIT
<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>
<input id="input1">
<button id="link">Search Google</button>
</body>
</html>
and
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
function searchGoogle() {
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + one;
window.location = two;
}
});
});
Didn't work either
You declare the function searchGoogle inside the listener function but it is never called. Try with:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
//there is no need to declare a new function here.
var one = document.getElementById("input1").value;
var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
window.location = two;
});
});
I'm currently working on a piece of coursework for Computer Science where we need to automate a traffic light sequence using buttons e.g "Traffic Lights On" or "Traffic Lights off". When I run my program through the internet explorer debugger, I get the error code: "The value of the property 'Timer' is null or undefined, not a Function object" on line 5 of my coding even though I've defined it as a function later on in the script. My programming can be found below:
<!DOCTYPE html>
<html>
<body>
<p>
<button type="button" onclick="Timer()"> Start Lights</button>
<button type="button" onclick="StopTimer()"> Stop lights</button>
</p>
<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg">
<script>
var TrafficLightList = [
"http://imgur.com/FHT9OoG.jpg",
"http://imgur.com/XZ1PxGh.jpg",
"http://imgur.com/5DUX0Wy.jpg",
"http://imgur.com/WpeEMZU.jpg"
];
var Automation = 0;
var TimeBetweenChange = null;
function ChangeLightAutomated() {
if(Automation == TrafficLightList.length) Automation = 0;
var Light = document.getElementById("TrafficLight");
image.src = TrafficLightList[Automation];
image.alt = TrafficLightList[Automation] //debugger
Automation = Automation + 1;
}
function Timer() {
if(!TimeBetweenChange) {
TimeBetweenChange = self.setTimeBetweenChange(ChangeLightAutomated, 1000);
}
}
function StopTimer() {
self.clearTimeBetweenChange(TimeBetweenChange);
TimeBetweenChange = null;
}
</body>
</script>
</html>
As I've said before, the error appears to be on line 5 of the program as "Timer" is not defined even though I define what Timer's function is on line 28.
There are several undefined variables in your code, for example you do var Light = document.getElementById("TrafficLight"); and then image.src = TrafficLightList[Automation]; in which case image is undefined. Also, there's no self defined anywhere.
Here's a working example of what you wanted to do:
var timer = (function () {
var trafficLightList = [
"http://imgur.com/FHT9OoG.jpg",
"http://imgur.com/XZ1PxGh.jpg",
"http://imgur.com/5DUX0Wy.jpg",
"http://imgur.com/WpeEMZU.jpg"
];
var automation = 0;
var interval = null;
function changeLightAutomated() {
if(automation == trafficLightList.length) automation = 0;
var image = document.getElementById("TrafficLight");
image.src = trafficLightList[automation];
image.alt = trafficLightList[automation] //debugger
++automation;
}
function startTimer() {
interval = setInterval(changeLightAutomated, 1000);
}
function stopTimer() {
clearInterval(interval)
}
return {
start: startTimer,
stop: stopTimer
}
})()
document.getElementById('start').addEventListener('click', function() {timer.start()})
document.getElementById('stop').addEventListener('click', function() {timer.stop()})
<!DOCTYPE html>
<html>
<body>
<p>
<button type="button" id="start"> Start Lights</button>
<button type="button" id="stop"> Stop lights</button>
</p>
<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg">
<script>
</script>
</body>
</html>
Add ID's to the buttons:
<input type="button" id="button1_id" value="Some description" onclick="Timer()">
<input type="button" id="button1_id" value="Some description" onclick="StopTimer()">
I added a value too, so the button has text inside. Change 'Some description' to some suggestive text
And then, for each one do (on javascript):
var timerSelector = document.getElementById("button1_id");
timerSelector.onclick = Timer;
var stopTimerSelector = document.getElementById("button2_id");
stopTimerSelector.onclick = StopTimer;
or simply:
document.getElementById("button1_id").onclick= Timer;
document.getElementById("button2_id").onclick = StopTimer;
Add these lines to the javascript.
Let me know if it solved the problem.
Good day.
I'm trying to add Google Places Autocomplete on dynamically created inputs using code below:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var container = document.getElementById('AutoComplInputs');
container.innerHTML += "<br>" + _id;
var _elem_for_upd = document.createElement("input");
_elem_for_upd.type = "text";
_elem_for_upd.id = _id;
container.appendChild(_elem_for_upd);
assignAutoCompl(_id);
}
</script>
</head>
<body>
<div id="AutoComplInputs"></div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
But when I press on button, autocomplete works only on last input, and all prevoius become broken. I think that it can be connected to dynamic creation of inputs, as the code below works fine:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
document.getElementById(_id).hidden = false;
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
assignAutoCompl("AutoCompl0");
assignAutoCompl("AutoCompl1");
}
</script>
</head>
<body>
<div id="AutoComplInputs">
<input id="AutoCompl0" type="text" hidden>
<input id="AutoCompl1" type="text" hidden>
</div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
I don't understand what I'm doing wrong ...
Don't use innerHTML to add content to container, you will lose all handlers bound to existing elements.
Use appendChild instead:
container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));