2016-10-30 10 views
1
  • プロンプトボックスに番号または名前を入力して送信をクリックした後、出力をアラートボックスや.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> 
 

 
&nbsp; 
 
&nbsp; 
 
<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> 
 

 
&nbsp; 
 
&nbsp; 
 
&nbsp; 
 
&nbsp; \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 &copy; Andreas Lambadarios 2016</p> 
 
</footer> 
 

 
</body> 
 
</html>

  • すべて正常に動作します。私が主に望むのは、名前と支払い情報を別のページに印刷することです。
+0

支払いのプロンプト機能が正しく計算されていません –

+0

私は計算を固定しました –

+0

はあなたのためのオプションですか? – youssouf

答えて

1

データを入力した後、そのデータを表示しているページにリダイレクトする必要がありますか?
その場合、データベース、クッキー、Webストレージ、クエリ文字列、またはURLフラグメント(これらのページ間で変数を渡す方法)を使用する必要があります。

たとえば、最後の1つを考えてみましょう。あなたが試みることができるどのようなことは、次のとおりです。に

function myPayment() { 
    var a = Number(prompt("Enter first number")); 
    var b = Number(prompt("Enter second number"));  

    if (a + b != null) { 
     window.location.href = 'otherPage.html#a:' + a + ';b:' + b; 
    } 
} 

、あなたは再びそれらの値を取得するには、以下のスクリプトを含めることができます

function getPaymentValues() { 
    var hashValues = window.location.hash.substring(1).split(';'); 
    var storedValues = {}; 

    for (var i = 0; i < hashValues.length; i++) { 
     var keyValue = hashValues[i].split(':'); 
     storedValues[keyValue[0]] = keyValue[1]; 
    } 

    return storedValues; 
} 

あなたはその後、ちょうど使用して再びオブジェクトから値を得ることができますフラグメントに指定されたキー(storedValues.aまたはstoredValues.bなど)。 Hereはこれを実証しているPlunkerです。

これは、ユーザーがセキュリティ上の懸念があるURLに値を持つキーを指定できることを意味します。私はあなたがしようとしていることを確信していませんが、代わりにデータベースを利用してサーバー側を使用したいと思うかもしれません。

希望すると助かります! :)

+0

はい正しいリダイレクト –

+0

リダイレクト時には次のようになります: –

+0

リダイレクトは機能しますが、フラグメント内のキーを適切に使用しますか? –

関連する問題