I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality should work within an HTML table with multiple columns.
With the help of some forum members, I have managed to write most of the code, but I'm struggling with implementing a loop function.
Below is the complete code, where I've used paragraphs to highlight the relevant sections of the code.
Thank you for your assistance!
<?php
session_start();
?>
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>Riesenhuber</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="Riesenhuber.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<meta name="generator" content="Nicepage 3.26.0, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Kulinarik"
}</script>
<script>
document.querySelectorAll('.u-table-cell').forEach(item => {
item.addEventListener('click', event => {
(function() {
const basePrice = document.getElementById("basePrice");
const quantityInput = document.getElementById("quantity");
const resOutput = document.getElementById("field_sum");
quantityInput.addEventListener("change", function() {
let currentQuantity = parseFloat(quantityInput.value);
let currentBasePrice = parseFloat(basePrice.getAttribute("value"));
resOutput.textContent = currentQuantity * currentBasePrice;
});
})()
})
})
</script>
<meta name="theme-color" content="#478ac9">
<meta property="og:title" content="Riesenhuber">
<meta property="og:description" content="">
<meta property="og:type" content="website">
</head>
<body class="u-body"><header class="u-clearfix u-grey-5 u-header u-sticky u-header" id="sec-d5e7"><div class="u-align-left u-clearfix u-sheet u-sheet-1">
<nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1rem; letter-spacing: 0px; font-weight: 700;">
<a class="u-button-style u-custom-active-border-color u-custom-border u-custom-border-color u-custom-borders u-custom-hover-border-color u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="#">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-hamburger"></use></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px;"><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect>
</symbol>
</defs></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-nav u-spacing-20 u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-border-active-palette-1-base u-border-hover-palette-1-base u-button-style u-nav-link u-text-active-custom-color-1 u-text-grey-90 u-text-hover-palette-2-base" href="Startseite.html" style="padding: 10px;">Startseite</a>
</li><li class="u-nav-item"><a class="u-border-active-palette-1-base u-border-hover-palette-1-base u-button-style u-nav-link u-text-active-custom-col...