I am having an issue correctly appending decimal pointers in my small Basic Calculator App

Question

In my basic calculator app, I'm experiencing a problem with correctly appending decimal points. When I input a number like 2.5 and then try to perform a calculation, the decimal point disappears, resulting in the number being interpreted as 25 instead of 2.5. How can I ensure that the decimal point is retained when entering decimal numbers in my calculator app? To address this problem, I have attempted to append the decimal point to the inputField value only if it doesn't already exist. I have also used parseFloat to convert the input values into numeric values. However, there might be an error in the logic that is causing the decimal point to disappear.

const inputField = document.querySelector("#inputField");
const container = document.querySelector(".main-container");
const allClear = document.querySelector("#all-clear");
const switchButton = document.querySelector("#switch");


allClear.addEventListener("click", clear);
switchButton.addEventListener("click", change);
container.addEventListener("click", handleClick);


function clear() {
    inputField.value = 0;
  }


function change() {
    let inputValue = parseFloat(inputField.value);
  
    if (inputValue < 0) {
      inputField.value = Math.abs(inputValue);
    } else {
      inputField.value = -Math.abs(inputValue);
    }
  }  


    let operator = "";
    let num1 = null;
    let num2 = null;


    function handleClick(event) {
      const clickedButton = event.target;
      const clickedValue = clickedButton.textContent;
    
      // Handle number buttons and decimal point
      if (!isNaN(clickedValue) || clickedValue === ".") {
        if (operator === "") {
          // If no operator is set, update num1
          if (clickedValue === ".") {
            // Append decimal point only if it doesn't already exist in the inputField value
            if (!inputField.value.includes(".")) {
              inputField.value += clickedValue;
            }
          } else {
            num1 = parseFloat(inputField.value);
        if (isNaN(num1)) {
          num1 = 0;
        }
        num1 = num1 * 10 + parseFloat(clickedValue);
        inputField.value = num1;
          }
        } else {
          // If operator is set, update num2
          if (clickedValue === ".") {
            // Append decimal point only if it doesn't already exist in the inputField value
            if (!inputField.value.includes(".")) {
              inputField.value += clickedValue;
            }
          } else {
            num2 = parseFloat(inputField.value);
        if(isNaN(num2)){
          num2=0;
        }
  num2 = num2 * 10 + parseFloat(clickedValue);
  inputField.value = num2;

          }
        }
      }
    
      // Handle operator buttons
      if (clickedValue === "+" || clickedValue === "-" || clickedValue === "*" || clickedValue === "/" || clickedValue === "%") {
        operator = clickedValue;
        inputField.value = operator;
      }
    
      // Handle equal button
      if (clickedValue === "=") {
        if (num1 !== null && num2 !== null && operator !== "") {
          let result;
          switch (operator) {
            case "+":
              result = num1 + num2;
              console.log(`I am result  ${result}`);
              break;
            case "-":
              result = num1 - num2;
              console.log(`I am result  ${result}`);
              break;
            case "*":
              result = num1 * num2;
              console.log(`I am result  ${result}`);
              break;
            case "/":
              result = num1 / num2;
              console.log(`I am result  ${result}`);
              break;
            case "%":
              result = num1 % num2;
          }
          inputField.value = result;
          num1 = result;
          num2 = null;
          operator = "";
        }
      }
    }
    

Answer 1

You have to change logic of updating inputField as num1/num2 for each input.

• Leave inputField as it is until operator pressed.

• Change the num1 and num2 for each input button pressed.

• When any operator pressed then change the inputField to operator and then clear it for num2 values.

As JavaScript has issues with floating point calculator it will generate wrong answers or garbage values in answer.

const inputField = document.querySelector("#inputField");
const container = document.querySelector(".main-container");
const allClear = document.querySelector("#all-clear");
const switchButton = document.querySelector("#switch");


allClear.addEventListener("click", clear);
switchButton.addEventListener("click", change);
container.addEventListener("click", handleClick);


function clear() {
    inputField.value = "";
}


function change() {
    let inputValue = parseFloat(inputField.value);

    if (inputValue < 0) {
        inputField.value = Math.abs(inputValue);
    } else {
        inputField.value = -Math.abs(inputValue);
    }
    console.log("inside change: ", inputField.value);
}


let operator = "";
let num1 = null;
let num2 = null;


function handleClick(event) {
    const clickedButton = event.target;
    const clickedValue = clickedButton.textContent;
    console.log(clickedValue);

    if (!isNaN(clickedValue) || clickedValue === ".") {
        if (operator === "") {
            // If no operator is set, update num1
            if (clickedValue === ".") {
                if (!inputField.value.includes(".")) {
                    inputField.value += clickedValue;
                }
            } else {
                inputField.value += clickedValue;
                if (isNaN(num1)) {
                    num1 = 0;
                }
                num1 = parseFloat(inputField.value);
            }
        } else {
            // If operator is set, update num2
            if (clickedValue === ".") {
                if (!inputField.value.includes(".")) {
                    inputField.value += clickedValue;
                }
            } else {
                inputField.value += clickedValue;
                if (isNaN(num1)) {
                    num2 = 0;
                }
                num2 = parseFloat(inputField.value);
            }

        }
    }

    // Handle operator buttons
    if (clickedValue === "+" || clickedValue === "-" || clickedValue === "*" || clickedValue === "/" || clickedValue === "%") {
        operator = clickedValue;
        inputField.value = operator;
        inputField.value = "";
    }


    // Handle equal button
    if (clickedValue === "=") {
        if (num1 !== null && num2 !== null && operator !== "") {
            let result;
            switch (operator) {
                case "+":
                    result = num1 + num2;
                    console.log(`I am result  ${result}`);
                    break;
                case "-":
                    result = num1 - num2;
                    console.log(`I am result  ${result}`);
                    break;
                case "*":
                    result = num1 * num2;
                    console.log(`I am result  ${result}`);
                    break;
                case "/":
                    result = num1 / num2;
                    console.log(`I am result  ${result}`);
                    break;
                case "%":
                    result = num1 % num2;
            }
            inputField.value = result;
            num1 = result;
            num2 = null;
            operator = "";
        }
    }
}