in the following java script code follow the directions listed in the picture be
ID: 3861087 • Letter: I
Question
in the following java script code follow the directions listed in the picture below
<!DOCTYPE html>
<html lang="en">
<head>
<!--
JavaScript 6th Edition
Chapter 8
Hands-on Project 8-3
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=page-width; initial-scale=1.0">
<title>Hands-on Project 8-3</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 8-3
</h1>
</header>
<article>
<form action="results.htm">
<fieldset id="paymentInfo" class="text">
<legend>Payment Information</legend>
<div class="offset">
<label for="ccNum">Card #</label>
<input id="ccNum" name="CardNumber" type="number" required="required" />
<div id="ccNumErrorMessage"></div>
</div>
<div id="cards" class="inline">
<input id="visa" name="PaymentType" type="radio" value="Visa" />
<label for="visa">Visa</label>
<input id="mc" name="PaymentType" type="radio" value="MC" />
<label for="mc">Master Card</label>
<input id="discover" name="PaymentType" type="radio" value="Discover" />
<label for="discover">Discover</label>
<input id="amex" name="PaymentType" type="radio" value="AmEx" />
<label for="amex">American Express</label>
</div>
<div class="offset">
<label>Expiration</label>
<div class="inline" id="exp">
<label for="expMo" id="expMoLabel">Expiration Month</label>
<select id="expMo" name="ExpMonth" required="required">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<label for="expYr" id="expYrLabel">Expiration Year</label>
<select id="expYr" name="ExpYear" required="required">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<label for="cvv">CVV</label>
<input id="cvv" name="CVVValue" type="number" required="required" />
</div>
</fieldset>
</form>
</article>
</body>
</html>
Explanation / Answer
Here is the script.js file code
function selectCardType()
{
var cardNumValue= document.getElementById("ccNum").value;
var visa = /^4[0-9]{12}(?:[0-9]{3})?$/;
var mc = /^5[1-5][0-9]{14}$/;
var discover = /^6(?:011|5[0-9]{2})[0-9]{12}$/;
var amex = /^3[47][0-9]{13}$/;
if(visa.test(cardNumValue))
{
document.getElementById("visa").checked = "checked";
}
else if(mc.test(cardNumValue))
{
document.getElementById("mc").checked = "checked";
}
else if(discover.test(cardNumValue))
{
document.getElementById("discover").checked = "checked";
}
else if(amex.test(cardNumValue))
{
document.getElementById("amex").checked = "checked";
}
//alert(cardNumValue);
}
function createEventListeners()
{
var cardNum= document.getElementById("ccNum");
if(cardNum.addEventListener)
{
cardNum.addEventListener("change",selectCardType,false);
}
else if(cardNum.attachEvent)
{
cardNum.attachEvent("onchange",selectCardType);
}
}
if(window.addEventListener)
{
window.addEventListener("load",createEventListeners, false);
}
else if(window.attachEvent)
{
window.attachEvent("onload",createEventListeners);
}
///////////////////////////////////////////////////////////
/*
testing it on the given three codes shows
a) is a visa card
b) is American Express
c) is Master Card
*/
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.