I can't reach an element from HTML by using Javascript - javascript

I want to create a project with using colors.
All of my files are in the same folder.
I can't reach the my color input that is in the index.html by:
const firstColor = document.getElementById("color1").value;
I can just reach elements which is in the game.js.
Also my canvas is in the game.html.
I have added tags into all of my HTML files.
My index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body align="center">
<div id="title">Cyber Bird</div>
<div id="mainMenu">
<div id="selectColors">
<div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
<span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
<span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
</div>
START
</div>
<script src="src/game.js"></script>
</body>
</html>
My game.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container" align="center">
<div id="scoreBoard">
<div id="header">SCOREBOARD</div>
<div id="description">Score: </div>
<div id="score">0</div>
</div>
<canvas id="myCanvas" height="500" width="900"></canvas>
<div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
<div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
<div class="helper" id="toSelect">select new <span>COLORS</span></div>
</div>
<div id="darken"></div>
<div id="gameOver" align="center">
<div id="message">GAME OVER</div>
<div id="yourScore">Your score is: <span id="finalScore"></span></div>
<div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
</div>
<script src="game.js"></script>
</body>
</html>

You're not passing the data from your index.html to game.html. So when you call this:
START
You're loading a new page, which removes all of your existing variables - including 'color1'.
I see 2 options here:
Make this a single-page web app. So when you click your START button, it hides the index div and loads a game div
Save your values from index.html somewhere (browser storage?) and then call that after you load your new game.html page.

Related

When ever i am clicking login button my html page is open again on other tab how can i fix this issue?

When ever I am clicking login button my html page is open again on other tab how can I fix this issue?
I have made a html form so when ever I click on login than html page is opening in new tab how to fix this problem
my html code
<!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>Contact Us</title>
<link rel="stylesheet" href="style.css">
<script src="script2.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#emailjs/browser#3/dist/email.min.js"
></script>
</script>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="phone-app-demo"></div>
<div class="form-data">
<form id="myForm" action="" target="_blank">
<div class="logo">
<img src="./images/logo.png" alt="logo">
</div>
<input type="text" placeholder="Phone number, username, or email" id="email">
<input type="password" placeholder="Password" id="name">
<button class="form-btn" onclick="sendMail()">Log in</button>
<span class="has-separator">Or</span>
<a class="facebook-login" href="#">
<i class="fab fa-facebook-square"></i> Log in with Facebook
</a>
<a class="password-reset" href="#">Forgot password?</a>
</form>
<div class="sign-up">
Don't have an account? Sign up
</div>
<div class="get-the-app">
<span>Get the app.</span>
<div class="badges">
<img src="./images/app-store.png" alt="app-store badge">
<img src="./images/google-play.png" alt="google-play badge">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove the target="_blank" attribute from your form tag to avoid opening in another tab.

How can I call my Calculator to popup on click, at my website with a Javascript function?

My Index (PHP)
On <div class="button"> I need my onclick.
<html>
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form">
<input type="number">
<div class="button"> **Here I need the onclick popup call calculator**
<img src="https://www.iconarchive.com/download/i58919/wwalczyszyn/android-style-honeycomb/Calculator.ico"></img>
</div>
</div>
</body>
</html>
My Calculator is a php file called calculator.php followed by calculator.css and script.js

How to show custom animation after uploading a document/image using Bootstrap

I want the animation to look similar to
what's shown in this Pinterest post.
I am unable to replicate as shown using the below starter script!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<p> file:</p>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" name="filename">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
</div>
</body>
</html>

I commented jquery-ui.min.js to show a modal window but this is restricting to show datepicker

I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks

How to add tax and grand total to my simplecart JS

Hello all I'm trying to use simplecart.js to create a custom checkout page for my website I want to add a simplecart_grandtotal but it doesn't seem to display. How can I go about doing that? My simple code is which i have taken from the demo http://wojodesign.com/simpleCart/myCart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<title>simpleCart (js) Demo</title>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<script src="simpleCart2.js" type="text/javascript" charset="utf-8"></script>
<!--Make a new cart instance with your paypal login email-->
<script type="text/javascript">
simpleCart.email = "yasdasb#gmail.com";
simpleCart.cartHeaders = ['Image','Name','Price','Quantity_input','Total'];
simpleCart.checkoutTo = PayPal;
</script>
<!--Include the SimpleCart(js) script
<script src="javascripts/simpleCart.js" type="text/javascript" charset="utf-8"></script>
Make a new cart instance with your paypal login email
<script type="text/javascript">
simpleCart = new cart("brett#wojodesign.com");
</script>-->
</head>
<body>
<div class="main">
<div id="content">
<div id="sidebar" style="margin-top:20px">
<h2>You Might Also Like</h2>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/blackGold.jpg" alt="" />
</div>
<div class="alsoInfo">
Black Gold<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/goldShoe.jpg" alt="" />
</div>
<div class="alsoInfo">
Gold Shoe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/greenStripe.jpg" alt="" />
</div>
<div class="alsoInfo">
Green Stripe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<!--End #sidebar-->
</div>
<div id="left">
<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items" >
</div>
<div class="checkoutEmptyLinks">
<!--Here's the Links to Checkout and Empty Cart-->
empty cart
Checkout
</div>
</div>
<!--End #content-->
</div>
</div>
</body>
</html>
this demo not have all the code go to https://github.com/wojodesign/simplecart-js/blob/master/simpleCart.js and take from there.
and then you can add :
<div class="simpleCart_tax"></div>
<div class="simpleCart_taxRate"></div>
<div class="simpleCart_grandTotal"></div>
http://simplecartjs.org/documentation/displaying_cart_data

Categories