I’m trying to build a shopping cart.But JavaScript function is not working.I have tried to figure out the issue. https://codepen.io/somen18/pen/abBzNLj
Hi. I can see at least you try to find DOM nodes, which don’t exist in your HTML:
const ticketInput = document.getElementById(ticket + '-count');
Also, it’s better to provide more details: which function, what error and so on. It will help people to give you correct feedback faster
sub-total ,tax and total don’t change when I click.I’ve tried so hard for 2 days.Still in dark.
function handleTicketPrice(ticket,isIncrease){
const ticketInput = document.getElementById(ticket + '-quantity');
const ticketQuantity = parseInt(ticketInput.value);
let ticketNewQuantity = ticketQuantity;
if(isIncrease == true) {
ticketNewQuantity = ticketQuantity + 1;
}
if(isIncrease == false && ticketQuantity > 0) {
ticketNewQuantity = ticketQuantity - 1;
}
document.getElementById(ticket + '-quantity').value = ticketNewQuantity;
let ticketTotal = 0;
if(ticket == 'first-class') {
ticketTotal = ticketNewQuantity * 150;
}
if (ticket == 'economy-class') {
ticketTotal = ticketNewQuantity * 100;
}
document.getElementById(ticket + '-quantity').innerText = '$' + ticketTotal;
calculateTotal();
}
function calculateTotal() {
const firstClassQuantity = getInputValue('first-class');
const economyClassQuantity = getInputValue('economy-class');
const totalPrice = firstClassQuantity * 150 + economyClassQuantity * 100;
document.getElementById('total-fare').innerText = '$' + totalPrice;
const tax = Math.round(totalPrice * 0.1);
document.getElementById('tax-amount').innerText = '$' + tax;
const grandTotal = totalPrice + tax;
document.getElementById('grand-total').innerText = '$' + grandTotal;
}
function getInputValue(ticket) {
const ticketInput = document.getElementById(ticket + '-count');
const ticketQuantity = parseInt(ticketInput.value);
return ticketQuantity;
}
As I told in my previous message, I got an error, when I tried to click on “+/-” buttons:
abBzNLj:252 Uncaught TypeError: Cannot read property 'value' of null
at getInputValue (cdpn.io/somen18/fullpage/pen.js:338)
at calculateTotal (cdpn.io/somen18/fullpage/pen.js:324)
at handleTicketPrice (cdpn.io/somen18/fullpage/pen.js:321)
at HTMLButtonElement.onclick (abBzNLj:252)
It means, you’re trying to get input field, which doesn’t exist here:
const ticketInput = document.getElementById(ticket + '-count');
For instance:
const economyClassQuantity = getInputValue('economy-class');
So, you’re trying to get node with id “economy-class-count” as a result, but in your html I can see only this one:
<input id="economy-class-quantity" class="inp-style inp-width" name="">
“Book Now” button doesn’t have “onclick” handlers at all. I hope, it will help
Most of the problem sort out.But why this line is showing error? const ticketQuantity = parseInt(ticketInput.value);
Could you provide error message or update the link in codepen.io? Does ticketInput
contain the DOM node?
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.