无法让一些 JS 数学工作

Question

I'm working on a small project for tuning a car in a game. Allowing users to input the own numbers and have them calculated and then displayed on the screen. The user would input a max number(65) a min number(1) and a percentage(55). And here is the equation I'm trying to complete: (65-1) *.55 +1.

I've linked all of the inputs in the.js file, and I can update the text on the screen as well, but can't get the equation to work properly. The problem starts when I try to multiple by the percentage(.55). And I haven't even added the + 1 yet either. I thought maybe I was having a problem converting from a string to a number as I was receiving 'NaN' in the console. But I'm really not sure when the problem is. Any help or suggestions on how to do this better would be greatly appreciated. Let me know if you need more information

 // ========== Main Variables ========== const weight = document.querySelector('#fWeightUserInput').value; const frontWeight = parseInt(weight); const antiRollMin = document.querySelector('#antiRollMin'); const antiRollMax = document.querySelector('#antiRollMax'); const mainForm = document.querySelector('#mainForm'); // ===== Final Tune Text ===== const antiRollFrontTxt = document.querySelector('#calcAntiRollFrontNum'); const antiRollRearTxt = document.querySelector('#calcAntiRollRearNum'); // ========== Tune Math Calculations =========== mainForm.addEventListener('submit', function (e) { e.preventDefault(); const antiRollFront = (antiRollMax.value - antiRollMin.value) * (frontWeight / 100); console.log(frontWeight); antiRollFrontTxt.innerText = antiRollFront; });

Answer 1

I think this is just a data type issue, I would try this:

const frontWeight = parseFloat(weight);

I would also change the entire code to this, to make sure you are not getting String instead of numbers:

const mainForm = document.querySelector('#mainForm');

// ===== Final Tune Text =====
const antiRollFrontTxt = document.querySelector('#calcAntiRollFrontNum');
const antiRollRearTxt = document.querySelector('#calcAntiRollRearNum');
// ========== Tune Math Calculations ===========

mainForm.addEventListener('submit', function (e) {
  e.preventDefault();

// ========== Main Variables ==========
const weight = parseInt(document.querySelector('#fWeightUserInput').value);
const frontWeight = parseFloat(weight);
const antiRollMin = parseInt(document.querySelector('#antiRollMin').value);
const antiRollMax = parseInt(document.querySelector('#antiRollMax').value);

  const antiRollFront =
    (antiRollMax - antiRollMin) * (frontWeight / 100);
  console.log(frontWeight);
  antiRollFrontTxt.innerText = antiRollFront;
});