使用JavaScript向ul添加li内容时的错误

Bug when adding li content to ul using JavaScript

本文关键字：错误 li JavaScript ul 添加 使用      更新时间：2023-09-26

在使用javascript代码将列表项添加到ul时，我有以下问题:我试图将列表项添加到ul，它在消失之前添加并显示几分之一秒。这是在file1.js:

中将项目添加到ul的代码
function isValidForm() {
addContentToUl("item1");
}
function addContentToUl(error) {
    var ul = document.getElementById("errorList");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(error));
    ul.appendChild(li);
}
这是调用file2.js中的函数的代码行: 
document.getElementById("myForm").onsubmit = isValidForm;

和HTML代码:

<!DOCTYPE html>
<html>
<head>
<title>My first PIU lab</title>
<link rel="stylesheet" type="text/css" href="BaroiuCezar_Lab1.css">
<script type="text/javascript" src="file1.js"></script>
</head>
<body>
<div>
        <form id="myForm" action="">
            <ul id="errorList"></ul>
            <p>Numele</p>
            <input id="idLastname" type="text" name="lastName" />
            <p>Prenumele</p>
            <input id="IdFirstName" type="text" name="firstName" />
            <p>Adresa</p>
            <input id="idAddress" type="text" name="address" />
            <p>Data nasterii</p>
            <input id="idBirthday" type="text" name="birthDate" />
            <p>Telefon</p>
            <input id="idPhone" type="text" name="phoneNumber" />
            <p>Email</p>
            <input id="idEmail" type="text" name="email" />
            <section>
                <span>Culoarea favorita</span>
                <input id="idColor" type="color" name="color" />
            </section>
            <br /><br /><br />
            <input type="submit" value="Trimite" />
            <input type="submit" value="Reseteaza" />
        </form>
        <script type="text/javascript" src="file2.js"></script>
    </div>

添加的项应该显示在form元素之后的第一个ul

function isValidForm(e) {
    e.preventDefault();//disable default form submission by browser.
    addContentToUl("item1");
}
function addContentToUl(error) {
    var ul = document.getElementById("errorList");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(error));
    ul.appendChild(li);
}

您的submit函数是isValidForm应该返回false以防止表单提交。像下面的

function isValidForm() {
   addContentToUl("item1");
   return false;
}
相关文章：