Javascript I wrote isn't working for for my html

Question

For my assignment, I have to create an online bookstore. I have created all the HTML and CSS needed. My only problem is the javascript. I have to create javascript code that will check the validity of the data inputted by the user. Here is my code:

window.onload = () => {
    document.getElementById("Pay Now").addEventListener("click", () => {
      const card = document.getElementById("card-number").value;
      const pattern = /^5[1-5][0-9]{14}$/;
      if (card.match(pattern)) {
        // If card number is valid, redirect to confirmation page
        window.location.href = "success.html";
      } else {
        // If card number is not valid, show an alert
        alert("Please enter a valid card number");
      }
    });
};

It's supposed to alert the customer if the number inputted isn't valid.

This is the HTML for the page it's supposed to link to:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <!-- Navigation Bar -->
        <nav>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </nav>
    <h1>Bookstore</h1>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src ="card.js"></script>
  </head>
  <body>
    <h2>Payment Details</h2>
    <form>
      <div>
        <label for="name">Name on Card</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div>
        <label for="card-number">Card Number</label>
        <input type="number" id="card-number" name="card-number" required>
      </div>
      <label for="expiry-month">Expiry Date</label>
    <div class="expiry-date">
    <select id="expiry-month" name="expiry-month">
        <option value="">Month</option>
        <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>
    <select id="expiry-year" name="expiry-year">
        <option value="">Year</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
        <option value="2025">2025</option>
        <option value="2026">2026</option>
    </select>
    </div>
      <div>
        <label for="cvv">CVV</label>
        <input type="number" id="cvv" name="cvv" required>
      </div>
      <button type="submit">Pay Now</button>
    </form>
  </body>
</html>

Please advise

According to: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id An id should not contain white spaces. — KuroSuzume, May 04 '23 at 19:09
You don't have `id="Pay Now"` anywhere in the HTML. You also can't have a space in an ID. — Barmar, May 04 '23 at 19:09
"Pay Now" is not a valid id. Add a real id to the button element. Also, don't forget to look at the browser's console when you're developing — l -_- l, May 04 '23 at 19:10
The button you are trying to create an Event Handler on doesn't have an Id. "Pay Now" is its content not Id — Mahan Lamee, May 04 '23 at 19:11
And please include these error traces when you ask a question here — l -_- l, May 04 '23 at 19:11
Do not use regex to check card validity. See https://stackoverflow.com/a/55019607/4115245. — Yuriy Yakym, May 04 '23 at 19:12
So you need to find a way to select the button. `document.querySelector("form button")` is one of many. Or just use a submit handler on the form. — epascarello, May 04 '23 at 19:18
Note that no page content can be in the [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head). That's invalid HTML. — isherwood, May 04 '23 at 19:21
There should be a proper selector on which you are adding the listener. There is no proper `id` for Pay Now button. Either add a proper id or query the button through different selector. — Amit Vishwakarma, May 04 '23 at 19:25
Also, html doesn't look good to me, navigation bar should not be there in head. — Amit Vishwakarma, May 04 '23 at 19:30
HI thank you, this really helped. The only problem i'm having is that when the card number is valid, it doesnt go onto the confirmation page. I dont know why it's not linking to it. — Big Man, May 05 '23 at 21:43

score -2 · Accepted Answer · answered May 04 '23 at 19:12

-2

If the issue is the event not firing, the problem is that you're writing document.getElementById("Pay Now") whereas your submit button has no id, 'Pay Now' is just the text of the button. try adding id="pay-now" to the button.

answered May 04 '23 at 19:12

DanWi

50
5

Javascript I wrote isn't working for for my html

1 Answers1