confused as to why my thing won't work
Go to solution
Solved by Gachr,
- First of all, html id, variable and function names start with a lower case letter. (id tags are always all lowercase)
- Second of all, you use // for comments.
- Third of all, do not redeclare variables - you use 'var' only when declaring - so 'using' the variable for the first time.
- Fourth of all, you don't do stuff like myVar++1, it's only myVar++, and if you want higher numbers, you do myVar += 3
- Fifth of all, you don't do html5, just html in your DOCTYPE.
- Sixth of all, the order variable is broken, so I just left it blank.
- Seventh of all, there shouldn't be spaces inside html attributes; between =.
- Eighth of all, you should've made an object for the output id next to the sizes.
- Ninth of all, the order[0] strings should be strings, you actually have made them variables further on.
You actually could've avoided most of those errors by using a proper editor and/or looking at the command line that's built into your browser (ctrl+shift+k on firefox).
You shouldn't use the html onclick attribute, and this code could be further improved by eliminating that and adding event listeners.
This is the fixed code:
<!DOCTYPE html> <html> <body> <p id="output"></p> <button id="small" onclick="small()"> Small £1 </button> <button id="medium" onclick="medium()"> Medium £1.50 </button> <button id="large" onclick="large()"> Large £2 </button> <script> var cost = 0; var order = []; var output = document.getElementById("output"); var sizeS = document.getElementById("small"); var sizeM = document.getElementById("medium"); var sizeL = document.getElementById("large"); function small(){ cost += 1; output.innerHTML = cost; order[0] = "small"; sizeS.disabled = true; topping(); } function medium(){ cost += 1.5; output.innerHTML = cost; order[0] = "medium"; sizeM.disabled = true; topping(); } function large(){ cost += 2; output.innerHTML = cost; order[0] = "large"; sizeL.disabled = true; topping(); } function topping(){ //blah blah blah } </script> </body> </html>
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now