<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Hello, world!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello, world! Simple SUM Calculator.</h1>
<br>
<div id="input-container"></div>
<br>
<button id="run">Calculate</button>
<br>
<p id="debug"></p>
<p id="result"></p>
<p id="summary"></p>
<script>
const numFields = 30;
function createInputFields(count) {
const container = document.getElementById('input-container');
container.innerHTML = ''; // Clear any existing content
for (let i = 1; i <= count; i++) {
const label = document.createElement('label');
label.textContent = `Value #${i}:`;
label.setAttribute('for', `var${i}`);
const input = document.createElement('input');
input.type = 'number';
input.id = `var${i}`;
input.required = true;
const br = document.createElement('br');
container.appendChild(label);
container.appendChild(input);
container.appendChild(br);
}
}
function extractVariablesFromHTML() {
const inputElements = document.querySelectorAll('input[id^="var"]');
const variables = {};
for (const input of inputElements) {
const id = input.id;
const value = input.value;
variables[id] = value;
}
return variables;
}
function simpleSum() {
const extractedVariables = extractVariablesFromHTML();
const debugElement = document.getElementById("debug");
const resultElement = document.getElementById("result");
debugElement.textContent = `All collected variables: ${JSON.stringify(extractedVariables)}`;
const vars = [];
let numVars = 0;
for (let i = 1; i <= numFields; i++) {
const value = extractedVariables[`var${i}`];
if (value !== "" && !isNaN(value)) {
vars.push(parseFloat(value));
numVars++;
} else {
break;
}
}
let theSum = 0;
for (let i = 0; i < numVars; i++) {
theSum += vars[i];
}
let theMult = 1.0;
for (let i = 0; i < numVars; i++) {
theMult *= vars[i];
}
let theDivide = vars[0];
for (let i = 1; i < numVars; i++) {
theDivide /= vars[i];
}
debugElement.textContent = ``;
resultElement.textContent = `The simple SUM of all ${numVars} values is: ${theSum} and the MULTIPLY is: ${theMult} and the DIVIDE is: ${theDivide}`;
}
createInputFields(numFields);
// Attach an event listener to the calculate button
const calculateButton = document.getElementById("run");
calculateButton.addEventListener("click", simpleSum);
</script>
</body>
</html>