I am at my very first attempt at website making and am trying to make a very simple webpage where people enter, write their name/nickname, pick an address (if possible to enable location based services even better), their number, press Next, on the second page, Press + or - to 5 pre-existing options that each has a different price and it sums up the total at the bottom, Press Next, on the third page confirm the entered data, Press Next, On Fourth Page: Display: Thank You For Your Order and automatically send me a email with the data he just entered and the secret picture just taken.
This is my code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Comanda Cu Tupeu</title><link rel="stylesheet" href="styles.css"></head><body><div id="page1"><h1>Care si Unde Esti?</h1><input type="text" id="name" placeholder="Nume/Porecla" required><input type="text" id="address" placeholder="Unde Vin" required><input type="text" id="phone" placeholder="Tel" required><button onclick="goToPage2()">Next</button></div><div id="page2" style="display:none;"><h1>Select Options</h1><div id="options"><div>Something ($10)</div><button onclick="updateTotal(30)">+</button><button onclick="updateTotal(-30)">-</button><div>Something ($15)</div><button onclick="updateTotal(150)">+</button><button onclick="updateTotal(-150)">-</button><div>Adaug Later ($20)</div><button onclick="updateTotal(20)">+</button><button onclick="updateTotal(-20)">-</button><div>Adaug Later ($25)</div><button onclick="updateTotal(25)">+</button><button onclick="updateTotal(-25)">-</button><div>Adaug Later ($30)</div><button onclick="updateTotal(30)">+</button><button onclick="updateTotal(-30)">-</button></div><h2>Total: $<span id="total">0</span></h2><button onclick="goToPage3()">Next</button></div><div id="page3" style="display:none;"><h1>Confirma Ba!</h1><div id="confirmData"></div><video id="video" width="300" height="200" autoplay></video><button onclick="captureImage()">Capture</button><button onclick="submitData()">Submit</button></div><div id="page4" style="display:none;"><h1>Ti-am primit comanda. Is pe drum! Sa ai bani fixi pregatiti.</h1></div><script src="script.js"></script></body></html>
And I can't for the life of me figure out why the next button isn't Next-ing.