I am working on an assignment where I have to write the JS that will read in a credit card number and then select the appropriate checkbox for whichever type of card it is (visa, amex, discover, mastercard).
The HTML was pre-written I just had to write the JS.
You're supposed to be able to type a number and tab over and it auto-select the type but instead I keep getting the error "Uncaught TypeError: discover is not a function"
I have never encountered this, can anyone enlighten me?
"use strict";
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(cardNumValue)) {
document.getElementById("discover").checked = "checked";
} else if (amex(cardNumValue)) {
document.getElementById("amex").checked = "checked";
}
}
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);
}<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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>
<script src="script.js"></script>
</body>
</html>