Redirecting To URL Via Dynamically Created JavaScript Button

Question

I am trying to create a very simple ordering form, that displays selected values, results, pricing, and confirmation to a user. I have everything I need except one thing. When A user clicks a button on the main page, I need to write some results and pricing to the screen, along with create two new buttons asking the user if they want to place an order or cancel. If they cancel, I need to write to the screen that the order was cancelled, and if the user confirms, I want to redirect to another page that contains delivery times, map, etc.

What I need is this: I need to know how to have my JS created button redirect to another page when the user clicks it.

Full current code for reference:

<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"
    } 

}

The code I am focusing on:

    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"
    }

All that happens currently is when I test this by clicking the submit button on the main page, I am automatically redirected to the new page without anything being written to the main page first.

Hopefully that makes sense.

Am I doing this wrong or am I missing something obvious?

Thank you.

if (newBut1.onclick is not correct, you should bind event instead of use this. — BeiBei ZHU
– BeiBei ZHU, Commented Jul 2, 2019 at 2:27
try using newBut1.addEventListener("click", function(){ window.location.href = "confirm.html"; }); to add the event listener to the function. — Liam Sperry
– Liam Sperry, Commented Jul 2, 2019 at 2:32
Still automatically redirects: This is what I did: var newBut1 = document.createElement("button"); newBut1.addEventListener("click", newPage()); function newPage() { window.location.href = "confirm.html" } — Dev-MDW2
– Dev-MDW2, Commented Jul 2, 2019 at 2:33
ah, don't use newPage() use newPage instead, this fires the funciton, use newBut1.addEventListener("click", newPage); I think that's the problem — Liam Sperry
– Liam Sperry, Commented Jul 2, 2019 at 2:34

Liam Sperry · Accepted Answer · 2019-07-02 02:52:52Z

1

To add the click event to the button, use addEventListener

I recommend replacing:

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

with:

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

Though if you already have a function you want to use as you mentioned in the comments, newPage(), use it like this

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

newBut1.addEventListener("click", newPage);

make sure not to use "()" when passing the function into addEventListener, the interpreter will think you want to fire the function instead of referencing it and cause your issue.

answered Jul 2, 2019 at 2:52

Liam Sperry

3182 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NandaSagar · Accepted Answer · 2022-12-31 12:38:56Z

0

I wasted more than 2 hours and finally, this was working fine. here type variable is something that changes based on the user input current URL = http://localhost:8000

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

redirects you to http://localhost:8000/con/899

edited Dec 31, 2022 at 12:38

answered Dec 31, 2022 at 12:38

NandaSagar

114 bronze badges

Collectives™ on Stack Overflow

Redirecting To URL Via Dynamically Created JavaScript Button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related