如何在新的空白頁面上打印提示框輸出結果而不是警報框本身？

在提示框中輸入數字或名稱並單擊提交後，我希望將輸出打印到另一個頁面而不是警告框或使用.innerhtml。在點擊 - >用戶類型的名稱或他們的2個支付號碼中，將其添加到總計 - >結果將打印在帶有文本的單獨頁面上。

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>

所有的JavaScript函數正常工作。我主要想要的是將名稱和付款信息打印在單獨的頁面上。

來源

2016-10-30 Andreas Lambadarios

支付提示功能不能正常計算 –

我修正了從不計算的計算 –

是PHP的一個選項嗎？ – youssouf

你是說在輸入數據後，用戶應該重定向到顯示該數據的頁面？
在這種情況下，您需要使用一種方式在這些頁面之間傳遞變量：數據庫，cookie，網絡存儲，查詢字符串或url片段（這就是我現在想到的）。

我們以最後一個例子爲例。你可以嘗試，是：

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是一個運動員展示這一點。

請注意，這意味着雖然用戶可以在url中指定具有其值的鍵，這可能是您的安全問題。我不確定你正在嘗試做什麼，但是你可能想使用服務器端而不是數據庫來支持。

希望它有幫助！ :)

來源

2016-10-31 01:08:27 DeveTho

是的正確重定向 –

它應該看起來像這樣，當重定向：[鏈接]（https://i.imgur.com/K8Vww7d.png） –

重定向的工作，但我怎麼恰當地利用片段中的鍵？ –

如何在新的空白頁面上打印提示框輸出結果而不是警報框本身？

回答

相關問題