Jump to content
Please Use CODE Tags

confused as to why my thing won't work

LOUOS
By LOUOS
in Programming
 Share
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>

 

Posted

Hi I am currently working on a small school project making a takeaway pizza order. we only have to design the interface and algorithm behind and I have been stuck on a particular problem where I do not know how to refresh a text. I tried using the .refresh but that wasn't what I was looking for. I will leave a simplified version below. also javascript....

Many Thanks. 


<!DOCTYPE html5>
<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= [[base],[Toppings]];

 

var S = document.getElementById("Small");
var M = document.getElementById("Medium");

var L = document.getElementById("Large");

 

function Small(){
var Cost++1;
document.getElementById("Output").innerHTML = Cost;
var Order[0]=("small");
S.disabled = true;
Topping();
}

 

function Medium(){
Cost++1.5;

document.getElementById("Output").innerHTML = Cost;
Order[0]=medium;
M.disabled = true;
Topping();
}

 

function Large(){
Cost++2;

document.getElementById("Output").innerHTML = Cost;
Order[0]=large;
L.disabled = true;
Topping();
}
function Topping(){

#blah blah blah

}


</script>

</body>
</html>

temporary solution - someone else's problem

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
5 minutes ago, LOUOS said:

snip

Using the 

[/CODE] tags will make it a bit easier to read

Running Arch with i3-gaps on a Thinkpad X1 Extreme
Data Science Postgrad

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

cool thanks.

temporary solution - someone else's problem

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution
  • 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>

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

thank you.

temporary solution - someone else's problem

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

This is the code that uses event listeners: 

<!DOCTYPE html>
<html>
<body>
<p id="output"></p>
<button id="small"> Small £1 </button>
<button id="medium">  Medium £1.50 </button>
<button id="large">  Large £2 </button>

<script>
function topping(){

    //blah blah blah

}
  
var cost = 0;
var order = [];
var output = document.getElementById("output");


document.getElementById("small").addEventListener("click", function(){
    cost += 1;
    output.innerHTML = cost;
    order[0] = "small";
    this.disabled = true;
    topping();
});

 

document.getElementById("medium").addEventListener("click", function(){
    cost += 1.5;
    output.innerHTML = cost;
    order[0] = "medium";
    this.disabled = true;
    topping();
});

 

document.getElementById("large").addEventListener("click", function(){
    cost += 2;
    output.innerHTML = cost;
    order[0] = "large";
    this.disabled = true;
    topping();
});


</script>
</body>
</html>

 

Link to comment
Share on other sites
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×