如何避免丢失在函数中添加的新内容

时间:2017-03-16 18:49:20

标签: javascript forms appendchild submission

我正在尝试在div标签的末尾打印新信息。但是,由于我使用了一个函数,因此信息只会出现几毫秒才会完全消失。如何将新信息永久附加到函数中的标记?

Javascript代码:

    function checkSubmission()
{
    var aForm = document.getElementById("frm");
    aForm.addEventListener("submit", displayResultsForm);
}
function displayResultsForm()
{
    var bk1 = document.getElementById("book_1").value;
    var bk2 = document.getElementById("book_2").value;
    var bk3 = document.getElementById("book_3").value;
    if(bk1 == null || bk1 == "" ||  isNaN(bk1) || bk2 == null || bk2 == "" || isNaN(bk2) || bk3 == null || bk3 == "" || isNaN(bk3))
        alert("Error! One of the 3 fields was left empty or does not contain a number.");

    var price1 = (19.99 * bk1).toFixed(2);
    var price2 = (86.00 * bk2).toFixed(2);
    var price3 = (55.00 * bk3).toFixed(2);

    var cont = document.getElementById("container");
    var displayBk1 = "<strong>Basic XHTML (Quantity = " + bk1 + "): $" + price1 + "</strong><br/>";
    var displayBk2 = "<strong>Basic XHTML (Quantity = " + bk2 + "): $" + price2 + "</strong><br/>";
    var displayBk3 = "<strong>Basic XHTML (Quantity = " + bk3 + "): $" + price3 + "</strong><br/>";

    var para = document.createElement("p");
    var node = document.createTextNode(displayBk1 + displayBk2 + displayBk3);
    para.appendChild(node);
    cont.appendChild(para);
}
window.addEventListener( "load", checkSubmission, false );

HTML代码的一部分:

<div id="container">
    <h2>Order Books Online</h2>
    <form action="" method="post" id="frm">

提前全部谢谢!!

0 个答案:

没有答案