Question

我有一个我无法修改的HTML文件（分配问题要求）。我的问题如下：当我点击＆＃34;下订单＆＃34;这是一个＆＃34;提交＆＃34;类型按钮，需要附加到现有文本的文本被正确附加，但在消失之前只停留在那里几分之一秒。我知道这是因为提交按钮会刷新页面，但我无法将类型修改为＆＃34;按钮＆＃34;。有没有办法在JavaScript文档中解决这个问题？

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Exercise 4</title>
    <meta charset="UTF-8"/>
    <script type = "text/javascript" src = "PriceCalculator.js"></script>
</head>

<body>
    <div id="container">
        <h2>Order Books Online</h2>
        <form action="" method="post" id=”frm”>
            <fieldset>
                <table border="0">
                    <tr>
                        <th>Book</th>
                        <th>Quantity</th>
                        <th>Price</th>
                    </tr>
                    <tr>
                        <td>Basic XHTML</td>
                        <td><input type="text" size="3" id="book_1" /></td>
                        <td>$19.99</td>
                    </tr>
                    <tr>
                        <td>Intro to PHP</td>
                        <td><input type="text" size="3" id="book_2" /></td>
                        <td>$86.00</td>
                    </tr>
                    <tr>
                        <td>Advanced JQuery</td>
                        <td><input type="text" size="3" id="book_3" /></td>
                        <td>$55.00</td>
                    </tr>
                </table>
                <br /><br />
                <input type="submit" value="Place Order" id="sub" />
            </fieldset>
        </form>
    </div>
</body>

</html>

JavaScript部分：

function getButtonElement(){
    var button = document.getElementById("sub");
    button.addEventListener("click", calculatePrice, false);
}

function calculatePrice(){
    var b1 = document.getElementById("book_1").value;
    var b2 = document.getElementById("book_2").value;
    var b3 = document.getElementById("book_3").value;
    if (isNaN(b1) || isNaN(b2) || isNaN(b3) || 
        b1 == "" || b2 == "" || b3 == "" || 
        b1 == null || b2 == null || b3 == null ||
        /\s/.test(b1) || /\s/.test(b2) || /\s/.test(b3)){
        alert("Incorrect input, try again.")
    }
    else{
        var total;
        b11 = b1*19.99;
        b22 = b2*86.00;
        b33 = b3*55.00;
        total = b11+b22+b33;
    }
    var result1 = "Basic XHTML (Quantity = "+b1+"): $"+b11;
    var result2 = "Intro to PHP (Quantity = "+b2+"): $"+b22;
    var result3 = "Advanced jQuery (Quantity = "+b3+"): $"+b33;
    var result4 = "Final Total: $"+total;
    var p1 = document.createElement("p");
    var n1 = document.createTextNode(result1);
    p1.appendChild(n1);
    document.getElementById("container").appendChild(p1);
    var p2 = document.createElement("p");
    var n2 = document.createTextNode(result2);
    p2.appendChild(n2);
    document.getElementById("container").appendChild(p2);
    var p3 = document.createElement("p");
    var n3 = document.createTextNode(result3);
    p3.appendChild(n3);
    document.getElementById("container").appendChild(p3);
    var p4 = document.createElement("p");
    var n4 = document.createTextNode(result4);
    p4.appendChild(n4);
    document.getElementById("container").appendChild(p4);  
}

window.addEventListener("load", getButtonElement, false);

非常感谢你的时间！

Answer 1

是的，您需要阻止表单的默认行为。

这就像

var form = document.getElementById("frm")
form.addEventListener("submit", function(event){
    event.preventDefault()
})

这对我有用 - 但是我注意到你的html很奇怪 - 表单的id属性上的引号很奇怪，所以最初我无法使用上述方法访问它而不将id=”frm”更改为{{ 1}}。

如果绝对不允许更改html（甚至修改看起来像拼写错误的东西），那么你可以通过另一种方法获取元素，比如id="frm" -

.getElementsByTagName

那就行了。

JavaScript：单击提交按钮后保持附加文本

1 个答案: