Question

我正在尝试创建一个非常简单的订购表，该表单向用户显示选定的值，结果，定价和确认。除了一件事情，我有我需要的一切。当用户单击主页上的按钮时，我需要在屏幕上写入一些结果和价格，并创建两个新的按钮，询问用户是否要下订单或取消订单。如果它们取消了，我需要在屏幕上写出取消订单的信息，如果用户确认，我想重定向到另一个包含交货时间，地图等的页面。

我需要的是：我需要知道如何在用户单击JS后将其创建的JS重定向到另一个页面。

完整的当前代码以供参考：

<script>

function main() {
    var pizzaSize = ""; var pizzaToppings = ""; var sizePrice = 0; var topPrice = 0; var delPrice = 0; var totalPrice = 0;
    var orderCustName = document.getElementById("custName").value;
    if (document.getElementById("sizeS").checked) {
        var pizzaSize = "Small"
        sizePrice = 8
    } else if (document.getElementById("sizeM").checked) {
        var pizzaSize = "Medium"
        sizePrice = 10
    } else if (document.getElementById("sizeL").checked) {
        var pizzaSize = "Large"
        sizePrice = 12
    } else if (document.getElementById("sizeXL").checked) {
        var pizzaSize = "Extra Large"
        sizePrice = 14
    }
    if (document.getElementById("topPep").checked) {
        pizzaToppings = pizzaToppings + "Pepperoni<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topSau").checked) {
        pizzaToppings = pizzaToppings + "Sausage<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topOlive").checked) {
        pizzaToppings = pizzaToppings + "Black Olives<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topMus").checked) {
        pizzaToppings = pizzaToppings + "Mushrooms<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topGP").checked) {
        pizzaToppings = pizzaToppings + "Green Peppers<br>";
        topPrice = topPrice + 1.5
    }
    var i = document.getElementById("optionPickDel");
    var orderType = i.options[i.selectedIndex].text;
    var ii = i.options[i.selectedIndex].value;

    if (ii == 1){
        delPrice = 0
    } else if (ii == 2){
        delPrice = 2
    }
    totalPrice = parseFloat(sizePrice + topPrice + delPrice).toFixed(2);

    document.write("Customer Name: " + orderCustName + "<br>");
    document.write("Pizza Size: " + pizzaSize + " ---------- Price: $" + parseFloat(sizePrice).toFixed(2) + "<br>");
    document.write("Toppings Selected ---------- Price: $" + parseFloat(topPrice).toFixed(2) + "<br>" + pizzaToppings + "<br>");
    document.write("Pick Up Or Delivery? ----- " + orderType + "<br><br>");
    document.write("Total Price Is: $" + totalPrice+ "<br><br>");
    document.write("Confirm Order<br>------------------<br>");
    var newBut1 = document.createElement("button");
    var newBut2 = document.createElement("button");
    newBut1.innerHTML = "OK";
    newBut2.innerHTML = "Cancel";
    newBut1.onclick = false
    document.body.appendChild(newBut1);
    document.body.appendChild(newBut2);
    if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
    } 

}

我关注的代码：

    document.write("Customer Name: " + orderCustName + "<br>");
    document.write("Pizza Size: " + pizzaSize + " ---------- Price: $" + parseFloat(sizePrice).toFixed(2) + "<br>");
    document.write("Toppings Selected ---------- Price: $" + parseFloat(topPrice).toFixed(2) + "<br>" + pizzaToppings + "<br>");
    document.write("Pick Up Or Delivery? ----- " + orderType + "<br><br>");
    document.write("Total Price Is: $" + totalPrice+ "<br><br>");
    document.write("Confirm Order<br>------------------<br>");
    var newBut1 = document.createElement("button");
    var newBut2 = document.createElement("button");
    newBut1.innerHTML = "OK";
    newBut2.innerHTML = "Cancel";
    newBut1.onclick = false
    document.body.appendChild(newBut1);
    document.body.appendChild(newBut2);
    if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
    }

当前发生的一切是，当我通过单击主页上的“提交”按钮对此进行测试时，我会自动重定向到新页面，而无需先将任何内容写入主页。

希望这是有道理的。

我做错了还是我遗漏了明显的东西？

谢谢。

Answer 1

要将点击事件添加到按钮，请使用addEventListener

我建议更换：

if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
}

具有：

newBut1.addEventListener("click", function(){
    window.location.href = "confirm.html";
});

尽管您已经拥有要使用的功能，如注释中提到的那样，newPage（），请像这样使用它

function newPage(){
    window.location.href = "confirm.html";
}

newBut1.addEventListener("click", newPage);

在将函数传递给addEventListener时，请确保不要使用“（）”，解释器会认为您要触发函数而不是引用该函数并导致问题。

通过动态创建的JavaScript按钮重定向到URL

1 个答案: