Issue with alert not being triggered in browser when using HTML and JavaScript function

Question

Issue with alert not being triggered in browser when using HTML and JavaScript function

Just starting out with HTML and Javascript!

I'm working on a simple program where users can input a card number, and the browser should indicate whether it is valid (between 13-16 digits) or not.

The website looks great, but I'm not getting an alert when a number is entered, valid or invalid. Any ideas on how to solve this issue?

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Card Validation Program</title>
  <link type=’text/css’/>
  <script>
    'use strict';
    function checkNumber(cardNum) {
        if (cardNum.length > 16 || cardNum.length < 13) {
            alert(‘This number is not valid.’);
            return false;
        } else {
            alert(‘This number is valid!’);
            return true;
        }
    }
  </script>
</head>

<body onload=“document.cardNum()”>

<h4> Enter Card Number: </h4>
<form>
    <input type='text' id=‘cardNum’ name=‘cardNum’/>
    <br>
    <input type="submit" value=Submit onclick=“checkNumber(cardNum)”/>
</form>

</body>
</html>

javascript html function return alert

Answer 1

Answer №1

After analyzing your code, I found three key issues that needed fixing: 1- The onload function 'document.cardNum()' was causing your page to crash immediately as there is no such function defined. 2- Some of the quotes in your code were not valid, possibly due to formatting during pasting. It's important to use proper quotation marks (" and ') for consistency. 3- Another issue was with your function where you were checking the length of the HTML element instead of the input value itself, causing it to not work correctly.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Card Reader</title>
  <link type=’text/css’/>
  <script>
    function getNumber(cardNum) {
        if (cardNum.value.length > 16 || cardNum.value.length < 13) {
            alert("This is not valid.");
            return false;}
        else {
            alert("This is valid.");
            return true;}
    }
  </script>
</head>

<body>

<h4> Enter Credit Card Number: </h4>
<form>
    <input type='text' id="cardNum" name="cardNum"/>
    <br>
    <input type="submit" value=Submit onclick = "getNumber(cardNum)"/>
</form>

</body>
</html>

Answer 2

After analyzing your code, I found three key issues that needed fixing: 1- The onload function 'document.cardNum()' was causing your page to crash immediately as there is no such function defined. 2- Some of the quotes in your code were not valid, possibly due to formatting during pasting. It's important to use proper quotation marks (" and ') for consistency. 3- Another issue was with your function where you were checking the length of the HTML element instead of the input value itself, causing it to not work correctly.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Card Reader</title>
  <link type=’text/css’/>
  <script>
    function getNumber(cardNum) {
        if (cardNum.value.length > 16 || cardNum.value.length < 13) {
            alert("This is not valid.");
            return false;}
        else {
            alert("This is valid.");
            return true;}
    }
  </script>
</head>

<body>

<h4> Enter Credit Card Number: </h4>
<form>
    <input type='text' id="cardNum" name="cardNum"/>
    <br>
    <input type="submit" value=Submit onclick = "getNumber(cardNum)"/>
</form>

</body>
</html>

Answer 3

Answer №2

Instead of relying solely on Shubham oli's suggestion, consider incorporating HTML5 validations into your code like this.

<form >
    <input type='text'  id="cardNum"  name="cardNum" required pattern='[0-9]{13,16}'/ >
    <br>
    <input type="submit" value='Submit' >
</form>

Answer 4

Instead of relying solely on Shubham oli's suggestion, consider incorporating HTML5 validations into your code like this.

<form >
    <input type='text'  id="cardNum"  name="cardNum" required pattern='[0-9]{13,16}'/ >
    <br>
    <input type="submit" value='Submit' >
</form>

Answer 5

Answer №3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Card Reader Application</title>
    <link type=’text/css’/>

    <script>
      function checkCardNumber() {
        var cardNum = document.getElementById("cardNum").value;
        if (isNaN(cardNum) || cardNum.length < 13 || cardNum.length > 16) {
          alert("Invalid input");
        } else {
          alert("Input is valid");
        }
      }
    </script>
  </head>
  <body>
    <h4>Please Enter Your Credit Card Number:</h4>

    <input type="text" id="cardNum" name="cardNum" />

    <button type="button" onclick="checkCardNumber()">Submit</button>
  </body>
</html>

This represents a straightforward and efficient method to validate credit card numbers.

Answer 6

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Card Reader Application</title>
    <link type=’text/css’/>

    <script>
      function checkCardNumber() {
        var cardNum = document.getElementById("cardNum").value;
        if (isNaN(cardNum) || cardNum.length < 13 || cardNum.length > 16) {
          alert("Invalid input");
        } else {
          alert("Input is valid");
        }
      }
    </script>
  </head>
  <body>
    <h4>Please Enter Your Credit Card Number:</h4>

    <input type="text" id="cardNum" name="cardNum" />

    <button type="button" onclick="checkCardNumber()">Submit</button>
  </body>
</html>

This represents a straightforward and efficient method to validate credit card numbers.

Answer 7

Answer №4

Three things were corrected in your code: 1- The onload attribute calling a non-existent function document.cardNum() was causing the page to crash immediately and preventing further script execution. 2- Some of the quotes used in the code were not valid; you should use " and ' for proper syntax. 3- In your function, you were passing the reference of the input element and checking the length of an HTML element instead of the input value.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Card Reader</title>
  <link type='text/css'/>
  <script>
    'use strict';
    function getNumber(cardNum) {
        if (cardNum.length <= 16 && cardNum.length >= 13) {
            alert('This is valid.');
            return false;
          }
        else {
            alert('This is not valid.');
            return true;
          }
    }
  </script>
</head>

<body>

<h4> Enter Credit Card Number: </h4>
<form>
    <input type='text' id='cardNum' name='cardNum'/>
    <br>
    <input type="submit" value='Submit' onclick="getNumber(document.getElementById('cardNum').value)"/>
</form>

</body>
</html>

Answer 8

Three things were corrected in your code: 1- The onload attribute calling a non-existent function document.cardNum() was causing the page to crash immediately and preventing further script execution. 2- Some of the quotes used in the code were not valid; you should use " and ' for proper syntax. 3- In your function, you were passing the reference of the input element and checking the length of an HTML element instead of the input value.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Card Reader</title>
  <link type='text/css'/>
  <script>
    'use strict';
    function getNumber(cardNum) {
        if (cardNum.length <= 16 && cardNum.length >= 13) {
            alert('This is valid.');
            return false;
          }
        else {
            alert('This is not valid.');
            return true;
          }
    }
  </script>
</head>

<body>

<h4> Enter Credit Card Number: </h4>
<form>
    <input type='text' id='cardNum' name='cardNum'/>
    <br>
    <input type="submit" value='Submit' onclick="getNumber(document.getElementById('cardNum').value)"/>
</form>

</body>
</html>

Issue with alert not being triggered in browser when using HTML and JavaScript function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Data is not displaying correctly in the Angular Material Table

NodeJS closes the previous server port before establishing a new server connection

issue with padding-bottom in Firefox and Internet Explorer 11

Establishing a pair of separate static directories within Nest

Utilizing dynamically assigned ng directives in my unique custom directive

What is the best way to align a tweet in the middle of

Generate an array that can be accessed across all components

What could be causing the Gruntfile to throw an error?

How can I centrally align the text(link) vertically in relation to its background image?

Is submitting with JQuery always a hit or miss?

Initiate an AJAX call with various data formats included

Retrieving form parameters within an EJS template

Stuck with the same icon even after a successful AJAX call

I need to know how to use Axios to fetch data from multiple sources at the same time without any risk of the

The issue lies with Express Mongoose failing to store the data

Tips for incorporating Angular2 into Eclipse using TypeScript

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

JavaScript Application - Problem with Universal Windows Script

Potential issue with Jhipster: loading of data could be experiencing delays

Is there a way to prevent this picture from shifting?