Text content is not being displayed in JavaScript functions for forms

Question

Text content is not being displayed in JavaScript functions for forms

Currently, my code includes a form that captures 4 input quantities. When the user clicks the purchase button, the total counts of: total items, subtotal, sales tax, total, and final discount amount should be displayed based on the user's input.

The issue I'm facing is that nothing seems to print. Not even the error checking print statement. All that displays are "0" values for each value in the shopping cart.

I need help identifying where the problem lies. I suspect that the getElementsByClassId function might be causing the issue with the class inside the parentheses. I'm unsure where to begin troubleshooting.

<!doctype html>
<html lang="en>
<<head>
 <meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title </title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Include jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
  thead { background-color: #333; color: #fff; font-weight: bold;  }
  .items, #nitems, #subtotal, #tax, #total, #final {text-align: right; width: 100px; }
  #checkout { margin-bottom: 45px; width: 200px; height: 50px; font-weight: bold; }
  #errors { padding-bottom: 200px; clear: both; font-weight: bold; clear: both; font-size: 20px;
  color: blue;
 }
</style>

</head>
<body class='container'>
<form name="testForm">
  <div class='row'>
  <div class='col-md-8'>
   <h2>Sam's Online Shop</h2>

   <h3>15% discount on all online sales </h3>

   <h3>Our World Famous Chocolates Now Available Online </h3>
     <table class='table'>
     <thead>
    ...

javascript function getelementbyid

Answer 1

Answer №1

There seem to be several errors in your scripts, here is a list of the mistakes:

document.getElementById('Purchase').onclick // wrong id "Purchase" should be "checkout"

if (errors.length > 0) // missing closing brace { should be if (errors.length > 0){

displayitems(); // incorrect function "displayItems()" should be called

document.getElementsByClassId('form-control items'); // should use document.getElementsByClassName instead

(document.getElementById('ch-' + j + '-qnt').value) <0 ) // extra parenthesis ) after value, it should be (document.getElementById('ch-' + j + '-qnt').value < 0 )

document.getElementById('checkout').onclick = function() {

var milk = document.getElementById('ch-1-qnt').value;
var fine = document.getElementById('ch-2-qnt').value;
var both = document.getElementById('ch-3-qnt').value;
var truff = document.getElementById('ch-4-qnt').value;
// Checking for errors
var errors = checkErrors();
// Show the errors
if (errors.length > 0) {
    //displayErrors(errors);
    checkErrors();
}else {
    // Display total count of purchased items
    displayItems();
    // Calculate subtotal cost for all items
    var subTotal = Sub(milk, fine, both, truff);
    document.getElementById('subtotal').textContent = subTotal;
    // Calculate and show tax amount 
    var salesTax = Tax(subTotal);
    document.getElementById('tax').textContent = salesTax;
    // Calculate and show the total cost including subtotal and tax
    var Total = displayTotal(subTotal, salesTax);
    document.getElementById('total').textContent = Total;
    // Show discounted price
    var DiscountTotal = Total * .15;
    document.getElementById('final').textContent = DiscountTotal;
}

//Returns an array of error messages
function checkErrors() {
var list = [];

for (var j = 1; j<4; j++){

if (document.getElementById('ch-' + j + '-qnt').value <0 ) {
    document.getElementById('errors').innerHTML = list;
}   
}
return list;
}

// Showing total item counts
function displayItems() {
var total = 0;
var input = document.getElementsByClassName('form-control items');
for (var i=0; i<input.length; i++){
    total += parseFloat(input[i].value);
}
document.getElementById('nitems').textContent = total;  
}

// Function to calculate the subtotal for all 4 inputs
function Sub(milk, fine, both, truff) ...
......

};

......

Answer 2

There seem to be several errors in your scripts, here is a list of the mistakes:

document.getElementById('Purchase').onclick // wrong id "Purchase" should be "checkout"

if (errors.length > 0) // missing closing brace { should be if (errors.length > 0){

displayitems(); // incorrect function "displayItems()" should be called

document.getElementsByClassId('form-control items'); // should use document.getElementsByClassName instead

(document.getElementById('ch-' + j + '-qnt').value) <0 ) // extra parenthesis ) after value, it should be (document.getElementById('ch-' + j + '-qnt').value < 0 )

document.getElementById('checkout').onclick = function() {

var milk = document.getElementById('ch-1-qnt').value;
var fine = document.getElementById('ch-2-qnt').value;
var both = document.getElementById('ch-3-qnt').value;
var truff = document.getElementById('ch-4-qnt').value;
// Checking for errors
var errors = checkErrors();
// Show the errors
if (errors.length > 0) {
    //displayErrors(errors);
    checkErrors();
}else {
    // Display total count of purchased items
    displayItems();
    // Calculate subtotal cost for all items
    var subTotal = Sub(milk, fine, both, truff);
    document.getElementById('subtotal').textContent = subTotal;
    // Calculate and show tax amount 
    var salesTax = Tax(subTotal);
    document.getElementById('tax').textContent = salesTax;
    // Calculate and show the total cost including subtotal and tax
    var Total = displayTotal(subTotal, salesTax);
    document.getElementById('total').textContent = Total;
    // Show discounted price
    var DiscountTotal = Total * .15;
    document.getElementById('final').textContent = DiscountTotal;
}

//Returns an array of error messages
function checkErrors() {
var list = [];

for (var j = 1; j<4; j++){

if (document.getElementById('ch-' + j + '-qnt').value <0 ) {
    document.getElementById('errors').innerHTML = list;
}   
}
return list;
}

// Showing total item counts
function displayItems() {
var total = 0;
var input = document.getElementsByClassName('form-control items');
for (var i=0; i<input.length; i++){
    total += parseFloat(input[i].value);
}
document.getElementById('nitems').textContent = total;  
}

// Function to calculate the subtotal for all 4 inputs
function Sub(milk, fine, both, truff) ...
......

};

......

Text content is not being displayed in JavaScript functions for forms

Answer №1

Similar questions

Troubleshooting the issue with nodejs fs createWriteStream and file path prefixes

Bring in a sole getServerSideProps function to various pages in Nextjs

Hiding a div using swipe gestures in Angular

"Manipulating Arrays in JavaScript: Adding an Item at a Specific

Utilizing the closest method to retrieve the form element

Encountering an error when attempting to iterate over an undefined property using an API

What is the process for receiving updates while subscribing in ReactReduxContext.Consumer?

Does ECMAScript differentiate between uppercase and lowercase letters?

Is it possible to transmit a WebRTC frame to a Python script?

Using the power of node.js to iterate through a loop of queries and execute

Cannot update VUEjs array following the splice operation

Making the toggle button functional on the navbar

Wait for another user keypress event in jQuery after a 0.5 second delay

comparing jquery version 1 and jquery version 3 backward-compatible browsers

The server attempted to send a request to the Open Api Vision API with the correct credentials, but unfortunately received an error indicating

Failed to load CSS and JS files

Organize the array object by roles using mapping and grouping techniques

The Ink CLI is anticipating the component to be a function

Identify a request in NodeJS without relying on express or accessing the request object independently of an express middleware

Is there a way to preserve line breaks when programmatically copying text to the clipboard with JavaScript?