I have a menu for a game that I am making. It uses JavaScript to switch between the menu pages by changing the styles of the buttons and the display of the content. However, when I run it and click on any one of the three menu buttons nothing happens. It says the functions are not functions. It's probably a silly mistake but please help. Thanks for the help in advance.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background: linear-gradient(to bottom,#7EC0EE,#C1E5FF);
height: 100%;
width: 100%;
margin: 0;
}
#menu {
color: rgba(0,0,0,0.7);
font-family: Segoe UI;
background: #915921;
padding-left: 15px;
padding-top: 45px;
font-size: 17px;
position: fixed;
height: 50%;
width: 100%;
left: 0px;
top: 0px;
}
#menubar {
background: transparent;
color: rgba(0,0,0,0.6);
text-align: center;
line-height: 40px;
font-size: 20px;
position: fixed;
height: 40px;
width: 100%;
left: 0px;
top: 0px;
}
#first {
transition: background 0.5s;
background: transparent;
position: absolute;
height: 40px;
width: 33%;
left: 0px;
top: 0px;
}
#first:hover {
background: transparent;
}
#firstcontent {
display: block;
}
#second {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 33%;
left: 33%;
top: 0px;
}
#second:hover {
background: transparent;
}
#secondcontent {
display: none;
}
#third {
transition: background 0.5s;
background: rgba(0,0,0,0.2);
position: absolute;
height: 40px;
width: 34%;
left: 66%;
top: 0px;
}
#third:hover {
background: transparent;
}
#thirdcontent {
display: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="menubar">
<div id="first" onclick="first()">FIRST</div>
<div id="second" onclick="second()">SECOND</div>
<div id="third" onclick="third()">THIRD</div>
</div>
<div id="firstcontent">
First
</div>
<div id="secondcontent">
Second
</div>
<div id="thirdcontent">
Third
</div>
</div>
<script>
var first = document.getElementById("first");
var firstcontent = document.getElementById("firstcontent");
var second = document.getElementById("second");
var secondcontent = document.getElementById("secondcontent");
var third = document.getElementById("third");
var thirdcontent = document.getElementById("thirdcontent");
function first() {
first.style.background = "transparent";
firstcontent.style.display = "block";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function second() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "transparent";
secondcontent.style.display = "block";
third.style.background = "rgba(0,0,0,0.2)";
thircontent.style.display = "none";
}
function third() {
first.style.background = "rgba(0,0,0,0.2)";
firstcontent.style.display = "none";
second.style.background = "rgba(0,0,0,0.2)";
secondcontent.style.display = "none";
third.style.background = "transparent";
thircontent.style.display = "block";
}
</script>
</body>
</html>
That's may be because you have named the variable and function as same. Like first() { } and first = somevalue?
Either rename your variables or rename your functions. Having a variable and function with the same name just causes problems.
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
I have run into a roadblock trying to get this to work. I am attempting to create a switch that toggles an action on/off. For example, when a user toggles on the switch the switch will do Javascript action when it is on the on position and will turn off when the switch is toggled to the off position. That is ultimately my end goal with this. What can I do to make this work, I have been doing trial and error for the last maybe 10 daysish?? What can I say? I am determined. Here is the code, any help is appreciated! Thank you everyone. <3
<!DOCTYPE>
<html>
<body>
<label class = 'switch'>
<input type = 'checkbox' id = 'yet'>
<span class = 'slider'></span>
</label>
</body>
<style>
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet{display: none;}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
</style>
<script>
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
</script>
</html>
Use an onClick event handler, checking the value of this.checked to know whether the input is checked or not.
HTML:
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
JavaScript:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
All together with CSS:
function handleClick(cb) {
if (cb.checked) {
myBird();
} else {
myRed();
}
}
function myBird() {
document.body.style.backgroundColor = '#000000';
}
function myRed() {
document.body.style.backgroundColor = '#FFFFFF';
}
.switch {
display: inline-block;
position: absolute;
height: 30px;
width: 60px;
}
#yet {
display: none;
}
.slider {
top: 1px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
cursor: pointer;
background-color: #D00005;
-webkit-transition: .3s;
border-radius: 25px;
}
.slider:before {
cursor: pointer;
position: absolute;
height: 26px;
width: 26px;
bottom: 2px;
left: 4px;
border-radius: 100%;
content: "";
background-color: #000000;
-webkit-transition: .3s;
}
#yet:checked+.slider {
background-color: #16AA03;
}
#yet:checked+.slider:before {
-webkit-transform: translateX(26px);
}
<label class = 'switch'>
<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>
<span class = 'slider'></span>
</label>
I am trying to use the addClass function to add class via JavaScript, but I just can't add the class. Is there a special way to define a class that will be added to an element onclick?
This is what I have tried:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
if (classie.has(input, 'open'))
classie.remove(input, 'open')
else
classie.add(input, 'open');
console.log('I am back')
});
.search-bar {
position: absolute;
top: 30px;
right: 60px;
width: 300px;
height: 40px;
overflow: hidden;
}
.sb-label {
position: absolute;
right: 0px;
display: block;
width: 50px;
height: 40px;
background-color: #32ab32;
text-align: center;
z-index: 10;
cursor: pointer;
}
.sb-label img {
display: block;
z-index: 30;
cursor: pointer;
}
.sb-input {
position: absolute;
right: 0px;
width: 50px;
height: 40px;
border: none;
backface-visibility: hidden;
transition: left 0.7s;
z-index: 5;
}
.sb-input .open {
z-index: 90;
}
.sb-input .open {
width: 100%;
transition: left 0.7s;
}
<div class="search-bar">
<form>
<label class="sb-label" id="sb-label">
<img src="search-icon01.png" width="35px" height="35px">
</label>
<input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
</form>
</div>
I added a callback and I got a message on my console, indicating that the function is ok, and when I did this, it works:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('I did it')
});
Apparently the problem is with my stylesheet. Could somebody please help me to correct this anomaly?
I'm curious where did you get classie from? Use classList, I think classie is too classy for us lowly developers:P
SNIPPET
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.search-bar {
position: absolute;
top: 30px;
right: 60px;
width: 300px;
height: 40px;
overflow: hidden;
}
.sb-label {
position: absolute;
right: 0px;
display: block;
width: 50px;
height: 40px;
background-color: #32ab32;
text-align: center;
z-index: 10;
cursor: pointer;
}
.sb-label img {
display: block;
z-index: 30;
cursor: pointer;
}
.sb-input {
position: absolute;
right: 0px;
width: 50px;
height: 40px;
border: none;
backface-visibility: hidden;
transition: left 0.7s;
z-index: 5;
}
.sb-input .open {
z-index: 90;
}
.sb-input .open {
width: 100%;
transition: left 0.7s;
}
</style>
</head>
<body>
<div class="search-bar">
<form>
<label class="sb-label" id="sb-label">
<img src="search-icon01.png" width="35px" height="35px">
</label>
<input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
</form>
</div>
<script>
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
if (input.classList.contains('open')) {
input.classList.remove('open');
} else {
input.classList.add('open');
console.log('i am back')
}
});
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('did i do it')
});
</script>
</body>
</html>
I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>
So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.
I'm starting my journey in creating webpages. I crave something to try to imitate windows 10 start UI as well as there animation on browser. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
#font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
JavaScript
function slideShow() {
setInterval( function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}
Use slideShow(); at the end of your javascript code.
Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.
Hi Please check this code now working you define the wrong semicolon symbol the next++; and element id is wrong in js wrong i have fixed this issue check now this code.
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<style>
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
</style>
<script type="text/javascript" >
function slideShow() {
var next = 0;
setInterval( function show(){
if (next == 0) {
animate();
next++;
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('savDesc').style.marginTop = "-2%";
document.getElementById('savDesc1').style.marginTop = "25%";
document.getElementById('savDesc1').style.opacity = "1";
document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('savDesc').style.marginTop = "17%";
// document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('savDesc1').style.opacity = "0";
document.getElementById('savDesc').style.opacity = "1";
}
</script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
For the setInterval function in slideShow(), put either
setInterval('animate()', 1000);
Or
setInterval(animate, 1000);