Delete element Javascript array

Question

I’m making a calculator (I’m using it to study), and I put a button that should delete the last number from the array, but when I click it returns an error:

script.js:16 Uncaught Typeerror: nums.pop is not a Function at clean (script.js:16) at Htmlbuttonelement.onclick (index.html:12)

let tela = document.getElementById('visor');
let verifica;
let nums = [];
let oldnum = 0;
let operation;

function mostranum(num){
  tela.innerHTML += num;
  nums += num;
}

function limpa(){
  nums.pop();
  tela.innerHTML = nums;
}

function operator(ope){
  let regx = /^[0-9]{1,8}$/;
   
  if (regx.test(nums) == true) {
    oldnum = nums;
  } else {
    alert('digite ate 8 digitos ');
  }
}

<div id='calculadora'>
    <button id='clear' onclick="limpa()">C</button>
    <div id="visor"></div>
    <button class="num" id="n7" value="7" onclick="mostranum(7)">7</button>
    <button class="num" id="n8" value="8" onclick="mostranum(8)">8</button>
    <button class="num" id="n9" value="9" onclick="mostranum(9)">9</button>
    <button class="ops" id="sum" onclick="operator('sum')">+</button>

    <button class="num" id="n4" value="4" onclick="mostranum(4)">4</button>
    <button class="num" id="n5" value="5" onclick="mostranum(5)">5</button>
    <button class="num" id="n6" value="6" onclick="mostranum(6)">6</button>
    <button class="ops" id="subtract" value="-" onclick="operator('subtract')">-</button>

    <button class="num" id="n1" value="1" onclick="mostranum(1)">1</button>
    <button class="num" id="n2" value="2" onclick="mostranum(2)">2</button>
    <button class="num" id="n3" value="3" onclick="mostranum(3)">3</button>
    <button class="ops" id="multiplication" value="*" onclick="operator('multiplication')">*</button>

    <button class="num" id="0" value="0" onclick="mostranum(0)">0</button>
    <button class="ops" id="float" value=".">.</button>
    <button class="result" id="result" onclick="operator('result')" >=</button>
    <button class="ops" id="division" value="/" onclick="operator('division')">/</button>
</div>

Answer 1

Initially, nums was declared as array:

let nums = [];

However, in the function mostranum, you are trying to use the operator += in an array. In this case, the array will be converted to a string, see:

let arr = [];
arr += 5;

console.log(typeof arr, arr); // string 5

Thus, you are getting the error since a string does not have the method pop in its prototype. In short, it is wrong to use the operator += to insert a new item at the end of array.

In such cases, use the method push:

let tela = document.getElementById('visor');
let verifica;
let nums = [];
let oldnum = 0;
let operation;

function mostranum(num) {
  tela.innerHTML = parseFloat(tela.innerHTML || 0) + num;
  nums.push(num);
}

function limpa(){
  nums.pop();
  tela.innerHTML = nums;
}

function operator(ope){
  let regx = /^[0-9]{1,8}$/;
   
  if (regx.test(nums) == true) {
    oldnum = nums;
  } else {
    alert('digite ate 8 digitos ');
  }
}

<div id='calculadora'>
    <button id='clear' onclick="limpa()">C</button>
    <div id="visor"></div>
    <button class="num" id="n7" value="7" onclick="mostranum(7)">7</button>
    <button class="num" id="n8" value="8" onclick="mostranum(8)">8</button>
    <button class="num" id="n9" value="9" onclick="mostranum(9)">9</button>
    <button class="ops" id="sum" onclick="operator('sum')">+</button>

    <button class="num" id="n4" value="4" onclick="mostranum(4)">4</button>
    <button class="num" id="n5" value="5" onclick="mostranum(5)">5</button>
    <button class="num" id="n6" value="6" onclick="mostranum(6)">6</button>
    <button class="ops" id="subtract" value="-" onclick="operator('subtract')">-</button>

    <button class="num" id="n1" value="1" onclick="mostranum(1)">1</button>
    <button class="num" id="n2" value="2" onclick="mostranum(2)">2</button>
    <button class="num" id="n3" value="3" onclick="mostranum(3)">3</button>
    <button class="ops" id="multiplication" value="*" onclick="operator('multiplication')">*</button>

    <button class="num" id="0" value="0" onclick="mostranum(0)">0</button>
    <button class="ops" id="float" value=".">.</button>
    <button class="result" id="result" onclick="operator('result')" >=</button>
    <button class="ops" id="division" value="/" onclick="operator('division')">/</button>
</div>