- プロンプトボックスに番号または名前を入力して送信をクリックした後、出力をアラートボックスや.innerhtmlを使用せずに別のページに印刷します。 Click-> Userタイプで名前または2つの支払い番号が追加され、合計 - >結果がテキスト付きの別のページに印刷されます。 JavaScriptの機能の
プロンプトボックスの出力結果をアラートボックス自体ではなく新しい空白ページに印刷するにはどうすればよいですか?
function myName() {
var person = prompt("Please enter your first and last name", " ");
if (person != null) {
alert("Hello " + person + " " + "Welcome to World Travels!!!");
}
}
function myPayment() {
var a = Number(prompt("Enter first payment: "));
var b = Number(prompt("Enter second payment: "));
if (a + b != null) {
window.location.href = 'otherPage.html#a:' + a + ';b:' + b;
}
}
function myCheck() {
alert("Program Number NO: 002462\nReservation NO: A987VBS\nConfirmation N0: 786543\nStatus: Excellent and trip on time.\nHave a nice trip.");
}
h2 {
background-color:black;
margin:0;
padding:0;
color:white;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
margin-top:15px;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-left:12px;
\t padding-right:12px;
\t padding-top:12px;
\t padding-bottom:12px;
\t
\t border-width: 1px;
\t border-style:solid;
\t border-color:yellow;
}
.boxed \t {
\t \t color:blue;
\t \t background-color:yellow;
\t \t margin-right:50px;
\t \t margin-left:50px;
\t \t margin-top:50px;
\t \t margin-bottom:50px;
\t \t padding-left:15px;
\t \t padding-right:15px;
\t \t padding-top:15px;
\t \t padding-bottom:15px;
\t \t border-style: dashed;
\t \t border-color: black;
\t \t }
body { \t
\t \t margin:0;
\t \t background-color:blue;
\t \t }
footer \t {
\t \t font-size:75%;
\t \t color:white;
\t \t text-align:center;
\t \t }
.scroll-left \t {
\t \t \t \t height: 50px; \t
\t \t \t \t overflow: hidden;
\t \t \t \t position: relative;
\t \t \t \t
\t \t \t \t color: white;
\t \t \t \t }
.scroll-left p {
\t \t \t \t position: absolute;
\t \t \t \t width: 100%;
\t \t \t \t height: 100%;
\t \t \t \t margin: 0;
\t \t \t \t line-height: 50px;
\t \t \t \t text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%); \t
transform:translateX(100%);
/* Apply animation to this element */ \t
-moz-animation: scroll-left 15s linear infinite;
-webkit-animation: scroll-left 15s linear infinite;
animation: scroll-left 15s linear infinite;
\t \t \t }
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%); \t \t
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
.greytext \t \t {
\t \t \t \t color:gray;
\t \t \t \t padding-left:5px;
\t \t \t \t }
.buttons \t {
\t \t \t text-align:center;
\t \t \t }
.join_button \t {
\t \t \t \t
\t \t \t \t background-color:yellow;
\t \t \t \t }
.payment_button \t {
\t \t \t
\t \t \t \t background-color:red;
\t \t \t \t }
.check_button \t {
\t \t \t
\t \t \t \t background-color:#00FFFF;
\t \t \t \t }
hr \t {
\t color:gray;
\t }
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head>
<!--File Information -->
<!--Document Name:Midhtml.txt -->
<!--Author: Andreas Lambadarios -->
<!--Date Created: 10/29/16 -->
<!--Date Updated: 10/29/16 -->
<!-- Description: -->
<!-- ******************************************************************** -->
<html lang="en">
<title>Mid Project</title>
<link rel="stylesheet" type="text/css" href="project3css.css">
<script src="project3js.js"></script>
</head>
<meta charset="utf-8">
<h2 id"top_header">The Best of World Travel Programs</h2>
<div class="scroll-left">
<p>Welcome To Our Best Program and Price!</p>
</div>
<div class="boxed">
This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!!
</div>
<div class="scroll-left">
<p>Don't Wait Limited Time Only!</p>
</div>
<div class="blink_me">
<p class="greytext">Select your choice by clicking one of the following buttons:</p>
</div>
\t
<div class="buttons">
<button onclick="myName()" class="join_button" type="button">Join</button>
<button onclick="myPayment()" class="payment_button" type="button">Payment</button>
<button onclick="myCheck()" class="check_button" type="button">Check-In</button>
</div>
<hr>
<footer>
<p>Copyright © Andreas Lambadarios 2016</p>
</footer>
</body>
</html>
- すべて正常に動作します。私が主に望むのは、名前と支払い情報を別のページに印刷することです。
支払いのプロンプト機能が正しく計算されていません –
私は計算を固定しました –
はあなたのためのオプションですか? – youssouf