函数不在浏览器 HTML、JavaScript 中发送警报

Question

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

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

Answer 2

我修复了 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>

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

Answer 4

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

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

函数不在浏览器 HTML、JavaScript 中发送警报

Function not sending alert in browser HTML, JavaScript

html

javascript

alert

return

function