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

u4vypkhs  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(147)

我正在尝试创建一个非常简单的订购表单,它向用户显示选定的值、结果、定价和确认。除了一件事之外,我已经拥有了所需的一切。当用户单击主页上的按钮时,我需要将一些结果和定价写入屏幕,同时创建两个新按钮,询问用户是要下订单还是要取消订单。如果用户取消订单,我需要在屏幕上写订单被取消,如果用户确认,我想重定向到另一个包含交付时间、Map等的页面。
我需要的是这个:我需要知道如何让我的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"
    }

目前发生的所有事情是,当我通过单击主页上的提交按钮进行测试时,我会自动重定向到新页面,而不会先向主页写入任何内容。
希望这是有道理的。
我是不是做错了还是忽略了什么明显的东西?
谢谢你。

sauutmhj

sauutmhj1#

若要向按钮添加单击事件,请使用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时不要使用"()",否则解释器会认为您希望激发函数而不是引用它,从而导致您的问题。

pw9qyyiw

pw9qyyiw2#

我浪费了2个多小时,最后,这是工作正常。这里类型变量是根据用户输入的当前URL = http://localhost:8000更改的东西

function foo(){
    window.location = 'con/'+type;
}

将您重定向到http://localhost:8000/con/899

相关问题