HTML возникли проблемы со связью с Java Script - PullRequest
0 голосов
/ 02 мая 2020

Похоже, код игнорирует скрипт java, что я делаю не так? когда я использую консоль браузера для отладки, она показывает ошибки, которые указывают на то, что ни одна из функций не была объявлена, когда они были объявлены в скрипте , это изображение показывает, что консоль браузера показывает ошибки код содержит форму встроено в таблицу

Изображение ошибки: enter image description here

<!DOCTYPE html>
<html>

<head>
    <title>Assignment Form</title>
    <script type="text/javascript">
        function test1() {
            var itest1 = document.getElementById("Fname").value;
            var regex = /^[a-zA-Za-z\s\'\-]{2,15}$/;
            if (regex.test(itest1)) {
                document.getElementById("message1").style.color = "green";
                document.get.ElementById("message1").innerHTML = "Value Accepted";
                return true;
            } else {
                document.getElementById("message1").style.color = "red";
                document.getElementById("message1").innerHTML =
                    "Name should not be of less than 2 characters and more than 15 characters";
                return false;
            }
        }

        function test2() {
            var itest2 = document.getElementById("Lname").value;
            var regex = /^[A-Za-z\s\'\-]{2,50}$/;
            if (regex.test(itest2)) {
                document.getElementById("message2").style.color = "green";
                document.get.ElementById("message2").innerHTML = "Value Accepted";
                return true;
            } else {
                document.getElementById("message2").style.color = "red";
                document.getElementById("message2").innerHTML =
                    "Name should not be of less than 2 characters and more than 50 characters";
                return false;
            }
        }

        function test3() {
            var itest3 = document.getElementById("Pnumber").value;
            var regex = /^\d{3}-\d{3}-\d{4}$/;
            if (regex.test(itest3)) {
                document.getElementById("message3").style.color = "green";
                document.get.ElementById("message3").innerHTML = "Value Accepted";
            } else {
                document.getElementById("message3").style.color = "red";
                document.getElementById("message3").innerHTML = "Follow the pattern xxx-xxx-xxxx";
            }
        }

        function test4() {
            document.getElementById("message4").style.color = "green";
            document.getElementById("message4").innerHTML = "value accepted";
        }

        function test5() {
            document.getElementById("message5").style.color = "green";
            document.getElementById("message5").innerHTML = "value accepted";
        }

        function Output() {
            var fname = document.getElementById("Fname").value;
            var lname = document.getElementById("Lname").value;
            var username = fname + " " + lname;
            var pnumber = document.getElementById("Pnumber").value;
            var choice = document.getElementById("b").value;
            var date = document.getElementById("Date").value;
            document.getElementById("Oheading").innerHTML = "Form Output";
            document.getElementById("para").innerHTML = username + "     " + date + "      " + choice;
            document.getElementById("para").innerHTML = pnumber;
        }
    </script>
</head>

<body style="background-color:lightgreen;">
    <H1 style="color:cyan;" style="margin-left:30px;">Form</H1>
    <form>
        <table>
            <tr>
                <td>First Name</td>
                <td><input id="Fname" type="text" value="First Name" onblur="test1();" /></td>
                <td><span id="message1"></span></td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td><input id="Lname" type="text" value="Last Name" onblur="test2();" /></td>
                <td><span id="message2"></span></td>
            </tr>
            <tr>
                <td>Phone Number</td>
                <td><input id="Pnumber" type="number" name="Phn" onblur="test3();" placeholder="xxx-xxx-xxxx" /></td>
                <td><span id="message3"></span></td>
            </tr>
            <tr>
                <td>Select Preffered Brand</td>
                <td><input id="b" type="radio" name="brand" value="Nike" checked />Nike<br>
                    <input id="b" type="radio" name="brand" value="Adidas" />Adidas<br>
                    <input id="b" type="radio" name="brand" value="Umbro" />Umbro<br></td>
                <td><span id="message4"></span></td>
            </tr>
            <tr>
                <td>Enter Birthdate</td>
                <td><input id="Date" type="date" placeholder="xx-xx-xxxx" onblur="test5();" /></td>
                <td><span id="message5"></span></td>
            </tr>
        </table>
        <button onclick="Output();" style="margin-left:150px;">Get Output</button>
    </form>
    <H2 id="Oheading"></H2>
    <p id="para"></p>
</body>

</html>

1 Ответ

0 голосов
/ 02 мая 2020

Переместить сценарии после <p id="para"></p>

Существует опечатка:

document.get.ElementById будет document.getElementById

Использовать textContent до set value из span

Код обновления:

<!DOCTYPE html>
<html>

<head>
    <title>Assignment Form</title>
   
</head>

<body style="background-color:lightgreen;">
    <H1 style="color:cyan;" style="margin-left:30px;">Form</H1>
    <form>
        <table>
            <tr>
                <td>First Name</td>
                <td><input id="Fname" type="text" value="First Name" onblur="test1();" /></td>
                <td><span id="message1"></span></td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td><input id="Lname" type="text" value="Last Name" onblur="test2();" /></td>
                <td><span id="message2"></span></td>
            </tr>
            <tr>
                <td>Phone Number</td>
                <td><input id="Pnumber" type="number" name="Phn" onblur="test3();" placeholder="xxx-xxx-xxxx" /></td>
                <td><span id="message3"></span></td>
            </tr>
            <tr>
                <td>Select Preffered Brand</td>
                <td><input id="b" type="radio" name="brand" value="Nike" checked />Nike<br>
                    <input id="b" type="radio" name="brand" value="Adidas" />Adidas<br>
                    <input id="b" type="radio" name="brand" value="Umbro" />Umbro<br></td>
                <td><span id="message4"></span></td>
            </tr>
            <tr>
                <td>Enter Birthdate</td>
                <td><input id="Date" type="date" placeholder="xx-xx-xxxx" onblur="test5();" /></td>
                <td><span id="message5"></span></td>
            </tr>
        </table>
        <button onclick="Output();" style="margin-left:150px;">Get Output</button>
    </form>
    <H2 id="Oheading"></H2>
    <p id="para"></p>
    <script type="text/javascript">
        function test1() {
            var itest1 = document.getElementById("Fname").value;
            var regex = /^[a-zA-Za-z\s\'\-]{2,15}$/;
            if (regex.test(itest1)) {
                document.getElementById("message1").style.color = "green";
                document.getElementById("message1").textContent = "Value Accepted";
                return true;
            } else {
                document.getElementById("message1").style.color = "red";
                document.getElementById("message1").textContent =
                    "Name should not be of less than 2 characters and more than 15 characters";
                return false;
            }
        }

        function test2() {
            var itest2 = document.getElementById("Lname").value;
            var regex = /^[A-Za-z\s\'\-]{2,50}$/;
            if (regex.test(itest2)) {
                document.getElementById("message2").style.color = "green";
                document.getElementById("message2").innerHTML = "Value Accepted";
                return true;
            } else {
                document.getElementById("message2").style.color = "red";
                document.getElementById("message2").innerHTML =
                    "Name should not be of less than 2 characters and more than 50 characters";
                return false;
            }
        }

        function test3() {
            var itest3 = document.getElementById("Pnumber").value;
            var regex = /^\d{3}-\d{3}-\d{4}$/;
            if (regex.test(itest3)) {
                document.getElementById("message3").style.color = "green";
                document.get.ElementById("message3").innerHTML = "Value Accepted";
            } else {
                document.getElementById("message3").style.color = "red";
                document.getElementById("message3").innerHTML = "Follow the pattern xxx-xxx-xxxx";
            }
        }

        function test4() {
            document.getElementById("message4").style.color = "green";
            document.getElementById("message4").innerHTML = "value accepted";
        }

        function test5() {
            document.getElementById("message5").style.color = "green";
            document.getElementById("message5").innerHTML = "value accepted";
        }

        function Output() {
            var fname = document.getElementById("Fname").value;
            var lname = document.getElementById("Lname").value;
            var username = fname + " " + lname;
            var pnumber = document.getElementById("Pnumber").value;
            var choice = document.getElementById("b").value;
            var date = document.getElementById("Date").value;
            document.getElementById("Oheading").innerHTML = "Form Output";
            document.getElementById("para").innerHTML = username + "     " + date + "      " + choice;
            document.getElementById("para").innerHTML = pnumber;
        }
    </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...