JavaScript function is not working

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.