Change the value of the AC button to C-CodePudding

The clear button: When we click on any operand button, the value of the button should change from AC to C. When this button is clicked, we clear the form and remove any active class from our operator buttons.

const output = document.getElementById("output");
const form = document.getElementById("calc_form");
const operand_btns = document.querySelectorAll("button[data-type=operand]");
const operator_btns = document.querySelectorAll("button[data-type=operator]");

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

let is_operator = false;
let equation = [];

const remove_active = () => {
  operator_btns.forEach((btn) => {
    btn.classList.remove("active");
  });
};

operand_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    if (output.value == "0") {
      output.value = e.target.value;
    } else if (output.value.includes(".")) {
      output.value = output.value   ""   e.target.value.replace(".", "");
    } else if (is_operator) {
      is_operator = false;
      output.value = e.target.value;
    } else {
      output.value = output.value   ""   e.target.value;
    }
  });
});

operator_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    e.currentTarget.classList.add("active");

    switch (e.target.value) {
      case "%":
        output.value = parseFloat(output.value) / 100;
        break;
      case "invert":
        output.value = parseFloat(output.value) * -1;
        break;
      case "=":
        equation.push(output.value);
        output.value = eval(equation.join(""));
        equation = [];
        break;
      default:
        let last_item = equation[equation.length - 1];
        if (["/", "*", " ", "-"].includes(last_item) && is_operator) {
          equation.pop();
          equation.push(e.target.value);
        } else {
          equation.push(output.value);
          equation.push(e.target.value);
        }
        is_operator = true;
        break;
    }
  });
});

body { text-align: center; }
button, input { margin: 0.5rem 0.1rem; }
.active { background: #FF8; }

<form id="calc_form">
  <input type="text" id="output" />
  <br />
  <button type="button" data-type="operand" value="1">1</button>
  <button type="button" data-type="operand" value="2">2</button>
  <button type="button" data-type="operand" value="3">3</button>
  <button type="button" data-type="operand" value="4">4</button>
  <button type="button" data-type="operand" value="5">5</button>
  <button type="button" data-type="operand" value="6">6</button>
  <button type="button" data-type="operand" value="7">7</button>
  <button type="button" data-type="operand" value="8">8</button>
  <button type="button" data-type="operand" value="9">9</button>
  <button type="button" data-type="operand" value="0">0</button>
  <br />
  <button type="button" data-type="operator" value=" "> </button>
  <button type="button" data-type="operator" value="-">-</button>
  <button type="button" data-type="operator" value="*">*</button>
  <button type="button" data-type="operator" value="/">/</button>
  <button type="button" data-type="operator" value="%">%</button>
  <button type="button" data-type="operator" value="invert">-1</button>
  <button type="button" data-type="operator" value="=">=</button>
</form>

I tried some ways, but I'm a beginner in JavaScript...

CodePudding user response：

Just add a reset listener:

form.addEventListener("reset", (e) => {
  remove_active();
  form.querySelector('button[type="reset"]').innerText = 'AC';
});

const output = document.getElementById("output");
const form = document.getElementById("calc_form");
const operand_btns = document.querySelectorAll("button[data-type=operand]");
const operator_btns = document.querySelectorAll("button[data-type=operator]");

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

form.addEventListener("reset", (e) => {
  remove_active();
  form.querySelector('button[type="reset"]').innerText = 'AC';
});

let is_operator = false;
let equation = [];

const remove_active = () => {
  operator_btns.forEach((btn) => {
    btn.classList.remove("active");
  });
};

const handleOperator = (operator) => {
  switch (operator) {
    case "%":
      output.value = parseFloat(output.value) / 100;
      break;
    case "invert":
      output.value = parseFloat(output.value) * -1;
      break;
    case "=":
      equation.push(output.value);
      output.value = eval(equation.join(""));
      equation = [];
      break;
    default:
      let last_item = equation[equation.length - 1];
      if (["/", "*", " ", "-"].includes(last_item) && is_operator) {
        equation.pop();
        equation.push(e.target.value);
      } else {
        equation.push(output.value);
        equation.push(operator);
      }
      is_operator = true;
      break;
  }
};

operand_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    if (output.value == "0") {
      output.value = e.target.value;
    } else if (output.value.includes(".")) {
      output.value = output.value   ""   e.target.value.replace(".", "");
    } else if (is_operator) {
      is_operator = false;
      output.value = e.target.value;
    } else {
      output.value = output.value   ""   e.target.value;
    }
  });
});

operator_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    e.currentTarget.classList.add("active");
    form.querySelector('button[type="reset"]').innerText = 'C';
    handleOperator(e.target.value); // Pass-in the value
  });
});

body { text-align: center; }
button, input { margin: 0.5rem 0.1rem; }
.active { background: #FF8; }

<form id="calc_form">
  <input type="text" id="output" />
  <br />
  <button type="button" data-type="operand" value="1">1</button>
  <button type="button" data-type="operand" value="2">2</button>
  <button type="button" data-type="operand" value="3">3</button>
  <button type="button" data-type="operand" value="4">4</button>
  <button type="button" data-type="operand" value="5">5</button>
  <button type="button" data-type="operand" value="6">6</button>
  <button type="button" data-type="operand" value="7">7</button>
  <button type="button" data-type="operand" value="8">8</button>
  <button type="button" data-type="operand" value="9">9</button>
  <button type="button" data-type="operand" value="0">0</button>
  <br />
  <button type="button" data-type="operator" value=" "> </button>
  <button type="button" data-type="operator" value="-">-</button>
  <button type="button" data-type="operator" value="*">*</button>
  <button type="button" data-type="operator" value="/">/</button>
  <button type="button" data-type="operator" value="%">%</button>
  <button type="button" data-type="operator" value="invert">-1</button>
  <button type="button" data-type="operator" value="=">=</button>
  <button type="reset">AC</button>
</form>