函数未在浏览器 HTML、JavaScript 中发送警报答案

【问题标题】：Function not sending alert in browser HTML, JavaScript函数未在浏览器 HTML、JavaScript 中发送警报
【发布时间】：2026-02-02 09:00:01
【问题描述】：

这里是 HTML 和 Javascript 的新手。

我正在编写一个非常基本的程序，它允许用户输入卡号，浏览器应该判断它是否是有效的数字（13-16 位之间）。

网站弹出并显示我想要的所有内容，但是当输入一个数字（有效或无效）时，不会发送警报以说明该数字是否正确。

关于如何解决此问题的任何建议？

<!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 not valid.’);
            return false;}
        else {
            alert(‘This is valid.’);
            return true;}
    }
  </script>
</head>

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

<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>

【问题讨论】：

一个建议！.....使用HTML5输入验证w3schools.com/html/html_form_attributes.asp

标签： javascript html function return alert

【解决方案1】：

我修复了 3 个问题； 1- onload=“document.cardNum()” ，没有这样的功能，所以你的页面立即崩溃，所以没有进一步的脚本执行 2- 我不知道它是否在粘贴过程中被破坏，但你的一些报价无效，你应该使用 " 和 ' 3- 这只是阻止正常工作；在您的函数中，您传递输入的引用并检查 HTML 元素的长度，您需要检查输入的值

<!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>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
  <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 myFunction() {
        var x = document.getElementById("cardNum").value;
        if (isNaN(x) || x.length < 13 || x.length > 16) {
          alert("Input not valid");
        } else {
          alert("Input OK");
        }
      }
    </script>
  </head>
  <body>
    <h4>Enter Credit Card Number:</h4>

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

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

这是一种简单直接的方法。

【讨论】：

【解决方案3】：

正如 Shubham oli 建议的那样，您还可以使用 HTML5 验证，如下所示。

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

【讨论】：

【解决方案4】：

我修复了 3 件事； 1- onload=“document.cardNum()” ，没有这样的功能，所以你的页面立即崩溃，所以没有进一步的脚本执行 2-我不知道它是否在粘贴过程中被破坏，但您的某些报价无效，您应该使用 " 和 ' 3-这只是阻止正常工作；在您的函数中，您传递输入的引用并检查 HTML 元素的长度，您需要检查输入的值

<!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>

【讨论】：