I am developing a kinematics calculator in JavaScript that sends user input to a server, processes the calculations, and then updates the HTML input fields with the results. The calculator works correctly until any other input is added after an initial calculation.
The calculator is dynamic, so it achieves the calculation through a backend .py file which feeds the frontend with the data. Although the whole computation is simple enough to do in the frontend, I am trying to build up a more complex set of calculators that use server side computations.
Sorry to do this, but here is the entire JS code that is related (I have removed much of the code in regards to significant figures, units etc – but this runs the whole frontend):
`document.addEventListener(‘DOMContentLoaded’, function() {
console.log(‘Document loaded’);
var displacementInput = document.getElementById('inputS');
var initialVelocityInput = document.getElementById('inputU');
var finalVelocityInput = document.getElementById('inputV');
var accelerationInput = document.getElementById('inputA');
var timeInput = document.getElementById('inputT');
var unitSelectors = document.querySelectorAll('.form-select');
var sigFigCheckbox = document.getElementById('sigFigCheckbox');
var clearButton = document.getElementById('clearButton');
var calculatedFields = []; // Array to track calculated fields
function handleInputChange() {
console.log('Input changed');
logInputValues();
attemptCalculation();
}
function logInputValues() {
console.log('Current input values:',
`Displacement: ${displacementInput.value}`,
`Initial Velocity: ${initialVelocityInput.value}`,
`Final Velocity: ${finalVelocityInput.value}`,
`Acceleration: ${accelerationInput.value}`,
`Time: ${timeInput.value}`);
}
function attemptCalculation() {
const userInputs = {
displacement: displacementInput.value.trim(),
initialVelocity: initialVelocityInput.value.trim(),
finalVelocity: finalVelocityInput.value.trim(),
acceleration: accelerationInput.value.trim(),
time: timeInput.value.trim()
};
const data = {
userInputs: userInputs,
use_significant_figures: sigFigCheckbox.checked
};
console.log('Sending data to server:', data);
sendRequest(data);
}
function sendRequest(data) {
console.log('Request data:', JSON.stringify(data));
fetch('/kinematics-calculator/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log('Processed response data:', data);
updateInputFields(data);
})
.catch(error => console.error('Error:', error));
}
function updateInputFields(response) {
console.log('Updating input fields with response:', response);
// Define a mapping from response field names to input IDs
const fieldToInputId = {
displacement: 'inputS',
initialVelocity: 'inputU',
finalVelocity: 'inputV',
acceleration: 'inputA',
time: 'inputT'
};
// Process calculated fields
response.calculatedFields?.forEach(field => {
const inputId = fieldToInputId[field];
const inputElement = document.getElementById(inputId);
if (inputElement) {
inputElement.value = response[field];
inputElement.disabled = true; // Lock the calculated field
console.log(`Updated and locked ${field} (id: ${inputId}) with value ${response[field]}`);
}
});
// Update other fields
Object.entries(response).forEach(([field, value]) => {
if (field !== 'calculatedFields' && value !== undefined) {
const inputId = fieldToInputId[field];
const inputElement = document.getElementById(inputId);
if (inputElement && !inputElement.disabled) {
inputElement.value = value;
console.log(`Updated ${field} (id: ${inputId}) with value ${value}`);
}
}
});
}
function clearInputs() {
console.log('Clearing inputs');
[displacementInput, initialVelocityInput, finalVelocityInput, accelerationInput, timeInput].forEach(input => {
input.value = '';
input.disabled = false;
});
calculatedFields = [];
}
[displacementInput, initialVelocityInput, finalVelocityInput, accelerationInput, timeInput].forEach(input => {
input.addEventListener('input', handleInputChange);
});
unitSelectors.forEach(selector => {
selector.addEventListener('change', handleInputChange);
});
sigFigCheckbox.addEventListener('change', handleInputChange);
clearButton.addEventListener('click', clearInputs);
});
`
Currently if I do a computation, let’s say s (displacement) = 110, u (initial velocity) = 0 and t (time) = 5.21 then the backend calculates the remaining two variables, final velocity (v) and acceleration (a).
The inputs all have their “SUVAT” letter attached, eg, inputS, inputU, inputV, inputA, and inputT.
The frontend then sends this data to the HTML to display – and any updates from the user should update the backend to recalculate and then the frontend to display again.
In this case, the user adds the s = 110, u = 0 and then begins to add the t = 5[.21] and as the user inputs the 5, the calculation can be sent forward. The user then proceeds to add the decimal place. But currently, when I do that, the cursor shifts left of the “5” and no decimal place exists. The user continues to add the “21” thinking it is after the decimal place, and instead gets “215” in the inputT variable.
What’s more, the backend has stopped calculating completely.
I’ve run through AI and it’s just circular, this is as far as I have got.
The input of s = 110, u = 0 and then begins to add the t = 5[.21]
Should display:
inputV = 44.0
inputA = 8.8
Then when the user has inputted the “.” after the 5, this should not change anything, but the backend should suggest it is recieving 5.0. Then when the user inputs the “2” after the decimal place the display should update to:
inputV = 42.30769….
inputA = 8.13609….
Then finally, the user will input the “1” after the 5.2 and this should output:
inputV = 42.22648….
inputA = 8.10489….
Instead, the calculation stops after the “5” has been added.