2017-04-17 16 views
-4

1つのHTMLファイルで2つのjavascriptファイルを実行する必要があります。1つのhtmlに2つのjavascriptを持つ

<script type="text/javascript" src="scripts/enhancements.js"></script> 
<script type="text/javascript" src="scripts/part2-payment.js"></script> 

これらのスクリプトの両方が私のpayment.htmlページ

にロードされます。しかし、それは下の1ではなく、トップ1をロードしているので、それは矛盾です。

スクリプト1 - その2 - payment.js

/** 
* Author: Kelvin Chong Choon Siong 
* Target: payment.html 
* Purpose: Validate and carry forward information to Payment.html 
* Created: 14 Apr 2017 
* Last updated: 17-04-17 
*/ 
"use strict"; 

function destroyAll(){ 
    sessionStorage.clear(); 
    window.location = "index.html"; 
} 

function calcCost(bikeType, quantity){ 
    var result = ""; 
    if (bikeType == "Road Bicycle (City Bike) $300") { 
     result = (300) * quantity; 
    } 
    if (bikeType == "Cyclocross Bicycle $330") { 
     result = (330) * quantity; 
    } 
    if (bikeType == "Touring Bicycle $310") { 
     result = (310) * quantity; 
    } 
    if (bikeType == "Track/Fixed-Gear Bicycle $380") { 
     result = (380) * quantity; 
    } 
    if (bikeType == "Mountain Bicycle $340") { 
     result = (340) * quantity; 
    } 
    if (bikeType == "BMX Bicycle $380") { 
     result = (380) * quantity; 
    } 
    if (bikeType == "Folding Bicycle $450") { 
     result = (450) * quantity; 
    } 
    if (bikeType == "Tandem Bicycle $600") { 
     result = (600) * quantity; 
    } 
    return result; 
} 

function getBooking(){ 
    if(sessionStorage.fname != undefined){ //if sessionStorage for username is not empty 
     //confirmation text 
     document.getElementById("fname").textContent = sessionStorage.fname + " " + sessionStorage.lname; 
     document.getElementById('address').textContent = sessionStorage.address + ", " + sessionStorage.suburb + ", " + sessionStorage.state + ", " + sessionStorage.postcode; 
     document.getElementById('emailadd').textContent = sessionStorage.emailadd; 
     document.getElementById('phonenumber').textContent = sessionStorage.pnumber; 
     document.getElementById('features').textContent = sessionStorage.extra; 
     document.getElementById('comments').textContent = sessionStorage.comments; 
     document.getElementById('type_bike').textContent = sessionStorage.bikeType; 
     document.getElementById('quantity1').textContent = sessionStorage.quantity; 
     document.getElementById('sizez').textContent = sessionStorage.size; 
     document.getElementById('cost').textContent = ("AU$ " + calcCost(sessionStorage.bikeType, sessionStorage.quantity)); 
     //fill hidden fields 
     document.getElementById("firstname").value = sessionStorage.fname; 
     document.getElementById("lastname").value = sessionStorage.lname; 
     document.getElementById("emailAddress").value = sessionStorage.emailadd; 
     document.getElementById("homeAddress").value = sessionStorage.address; 
     document.getElementById("suburbs").value = sessionStorage.suburb; 
     document.getElementById("states").value = sessionStorage.state; 
     document.getElementById("postcode").value = sessionStorage.postcode; 
     document.getElementById("radioButtons").value = sessionStorage.radiobutton; 
     document.getElementById("pnumber").value = sessionStorage.pnumber; 
     document.getElementById("type_bike[]").value = sessionStorage.bikeType; 
     document.getElementById("quantity[]").value = sessionStorage.quantity; 
     document.getElementById("size[]").value = sessionStorage.size; 
     document.getElementById("costFinal").value = calcCost(sessionStorage.bikeType, sessionStorage.quantity) 
     document.getElementById("extraFeature").value = sessionStorage.extra; 
     document.getElementById("comment").value = sessionStorage.comments; 
    } 
} 

function cardExpiry(){ 
    var errMsg = ""; 
    var getExpiryDate = document.getElementById("expirydate").value; 
    var getMonth = String(getExpiryDate).charAt(0) + String(getExpiryDate).charAt(1); 
    var getYear = String(getExpiryDate).charAt(3) + String(getExpiryDate).charAt(4); 
    var dateNow = new Date(); 
    var expiryInput = new Date(); 
    expiryInput.setFullYear('20' + getYear, getMonth-1, 1); 

    if (expiryInput < dateNow){ 
     errMsg = "Your expiration date is before current date. Please change it.\n" 
    } 
    return errMsg; 
} 

function cardValidation() { 
    /*Visa cards have 16 digits and start with a 4 
    MasterCard have 16 digits and start with digits 51 through to 55 
    American Express has 15 digits and starts with 34 or 37.*/ 
    var errMsg = ""; 
    var cardNumber = document.getElementById('cardnum').value; 
    var cardType = document.getElementById('cardType').value; 
    var number0 = String(cardNumber).charAt(0); 
    var number1 = String(cardNumber).charAt(1); 
    switch (cardType) { 
     case "Visa": 
     if ((number0 !== "4") || (cardNumber.length !== 16)) { 
      errMsg = "Visa cards have 16 digits and start with a 4.\n"; 
     } 
     break; 
     case "Mastercard": 
     if (((number0) !== "5") || ((number1) !== "1" && ((number1) !== "2") && ((number1) !== "3") && ((number1) !== "4") && ((number1) !== "5")) || (cardNumber.length !== 16)) { 
      errMsg = "MasterCard have 16 digits and start with digits 51 through to 55.\n"; 
     } 
     break; 
     case "Amex": 
     if (((number0) !== "3") || ((number1) !== "4" && ((number1) !== "7")) || (cardNumber.length !== 15)) { 
      errMsg = "Amex cards have 15 digits and start with a 34 or 37.\n"; 
     } 
     break; 
     default: 
      errMsg = "Please write your correct card number.\n"; 
    } 
    return errMsg; 
} 

function cvvValidation(){ 
    var errMsg = ""; 
    var cardType = document.getElementById('cardType').value; 
    var cvvcheck = document.getElementById('CVV').value; 
    //3 digits, for Visa and Mastercard, 4 digits for American Express. 
    switch (cardType) { 
     case "Visa": 
     if (cvvcheck.length !== 3) { 
      errMsg = "Visa cards have a CVV of 3 digits.\n"; 
     } 
     break; 
     case "Mastercard": 
     if (cvvcheck.length !== 3) { 
      errMsg = "MasterCards have a CVV of 3 digits.\n"; 
     } 
     break; 
     case "Amex": 
     if (cvvcheck.length !== 4) { 
      errMsg = "Amex cards have a CVV of 4 digits..\n"; 
     } 
     break; 
     default: 
      errMsg = "Please write your correct card CVV.\n"; 
    } 
    return errMsg; 
} 


function validate() { 
    var errMsg = ""; 
    var result = true; 


    var checkCard = cardValidation(); 
    if (checkCard !== "") { 
     errMsg = errMsg + checkCard; 
     result = false ; 
    } 

    var checkCVV = cvvValidation(); 
     if (checkCVV !== "") { 
     errMsg = errMsg + checkCVV; 
     result = false ; 
    } 

    var checkExpiry = cardExpiry(); 
    if (checkExpiry !== ""){ 
     errMsg = errMsg + checkExpiry; 
     result = false; 
    } 

    if (errMsg != "") { 
     alert(errMsg); 
    } 

    return result; 
} 

function init() { 
    getBooking(); 
    var regForm = document.getElementById("form2"); 
    regForm.onsubmit= validate; 
    var destroyEverything = document.getElementById('cancelout'); 
    destroyEverything.onclick = destroyAll; 
} 

window.onload = init; 

だから、これは私が、同時に両方にロードする方法を見つけ出すことはできません、今

Script 2 - enhancements.js 
"use strict"; 

function writeNewMessage(){ 
    var sMessage = document.getElementById('spanny'); 
    sMessage.textContent = "this is a test"; 
} 

function init2() { 
    var labelTest = document.getElementById("booking_form"); 
    labelTest.onclick = writeNewMessage; 
} 

window.onload = init2; 

スクリプト2です。

私が持っているいくつかの制限(ソリューションのほとんどは、私が使用することはできません、ネット上で提供するため)

body onload 
No Inline javascript 
No jQuery 

仕事の両方を作るために別のがあるのであれば、私は不思議でしたか?

+1

* "明らかに矛盾しています" * - いいえ、それはそれらのスクリプトが何をしているか分かりません。 – deceze

+0

あなたが投稿したHTMLは動作しているはずです。そうでなければ、他の場所にある可能性があります。 – Frxstrem

+0

私もスクリプトを投稿します –

答えて

0

window.onload = function() { 
init(); 
init2(); 
}; 

これをjsスクリプトのいずれかで実行すると動作します。 良いn'est jamais mieux servi que par soi-meme。

1

あなたonloadsが互いに上書きされます。

window.onload = init2;//will override window.onload=init; 

そう:使用してそれを把握するために管理され、他のすべてのクリックの同じ

window.addEventListener("load",init2); 

を、など

+0

私は次のことをやってみました: 'function init2(){ var labelTest = document.getElementById(" booking_form "); labelTest.addEventListener( "onclick"、writeNewMessage); } window.addEventListener( "onload"、init2); ' まだ動作していません。間違っていますか? –

+0

@KelvinChong add * console。log( "test")*どこでも動作していない部分を参照してください... –

+0

これは少し新しくなっていますが、一度追加したらこのログをどのように表示しますか? –

関連する問題