What I want my program to do
When I enter the correct discount code ("discount"), 10% will be taken off the total price and the new 'grand total' will be displayed. If no discount code is entered/correct one entered, then the grand total will be the same as the 'total price'.

Problem
Nothing is showing at all in grand total. This is my output when I click submit with the correct discount code entered: [Image of output][1] [1]: https://i.stack.imgur.com/WUwnK.png

What I've tried
In my JS script I have tried the following:

<script>
function getGrandTotal(){
const total = document.getElementbyId("total").value;
const dis = document.getElementbyId("discountCode").value;

 if(dis === "discount"){
  document.getElementById("grandTotal").value=
 total * 0.9;
 }else{
grandTotal = total;
}
 }
document.getElementById('btnSubmit').addEventListener('click', getGrandTotal);
</script>

My total amount was assigned in this function:

<script>
function getTotalAmount() {
const choice = document.getElementById("burgerSize").value;
const amount = document.getElementById("quantity").value;

if (choice === "4") {
  document.getElementById("total").value =
    amount * 4;
}
if (choice === "6") {
  document.getElementById("total").value =
    amount * 6;
}
if (choice === "10") {
  alert("Health Warning");
  document.getElementById("total").value =
    amount * 10;
}
}
document.getElementById('burgerSize').addEventListener('change', getTotalAmount);
document.getElementById('quantity').addEventListener('change', getTotalAmount);
</script>

I was thinking the same structure of method would apply to both of these tasks. I have also tried using if(dis !== "discount"){grandTotal = total;} instead of my else statement, but this is also not working. Any help would be great!

Here's my relevant html code:

<label> Total cost: </label>
<input type="text" id="total" /><br>

<label for = "discountCode"> Discount code: </label>
<input type="text" id="discountCode" /><br>
<input type="button" id="btnSubmit" value="Submit " onclick="return getGrandTotal()" /><br>

<label> Grand total: </label>
<input type="text" id="grandTotal" /><br>

CodePudding user response：

just some syntax errors.

<input type="button" id="btnSubmit" value="Submit " onclick="return getGrandTotal" /><br>

change to

onclick="getGrandTotal()"

document.getElementById is case sensitive

working code here

CodePudding user response：

There are few issue here with syntax. method name is getElementById and not getElementbyId.

Also value calculated is not set to input box.

const total = document.getElementById("total").value;
const dis = document.getElementById("discountCode").value;

let grandTotal = 0;

if(dis === "discount"){
    grandTotal = total * 0.9;
}else{
    grandTotal = total;
}
document.getElementById('grandTotal').value = grandTotal;

Add some plugins to your editor to check syntax error.