Element problem with char and number

Question

I’m not being able to do mathematical operations with this function, obviously because there are char elements inside.

var centesimas = 0;

function inicio() {
  control = setInterval(cronometro, 10);
  document.getElementById("inicio").disabled = true;
  document.getElementById("parar").disabled = false;
  document.getElementById("continuar").disabled = true;
  document.getElementById("reinicio").disabled = false;
}

function parar() {
  clearInterval(control);
  document.getElementById("parar").disabled = true;
  document.getElementById("continuar").disabled = false;
}

function reinicio() {
  clearInterval(control);
  centesimas = 0;
  document.getElementById("Centesimas").innerHTML = "|00|"
  document.getElementById("inicio").disabled = false;
  document.getElementById("parar").disabled = true;
  document.getElementById("continuar").disabled = true;
  document.getElementById("reinicio").disabled = true;
}

function cronometro() {
  if (centesimas < 999) {
    centesimas++;
    if (centesimas < 10) {
      centesimas = "0" + centesimas
    }
    document.getElementById("Centesimas").innerHTML = ":" + centesimas;
  }
  if (centesimas == 999) {
    centesimas = -1;
  }
}

function resultado() {
  document.getElementById("Result").innerHTML += document.getElementById("Centesimas").firstChild.data * 3;
}

<div id="contador">
  <div class="reloj" id="Centesimas">:00</div>
  <input type="button" class="boton" id="inicio" value="&#9658;" onclick="inicio();">
  <input type="button" class="boton" id="parar" value="&#8718;" onclick="parar();" disabled>
  <input type="button" class="boton" id="continuar" value="&#8634;" onclick="inicio();" disabled>
  <input type="button" class="boton" id="reinicio" value="&#8635;" onclick="reinicio();" disabled>
  <input type="button" class="boton" id="resultado" value="Resultado" onclick="resultado();">
  <div class="reloj" id="Result"></div>
</div>

it always returns Nan on account of this, but and would like to know if you have how to do without removing the char type elements from within

Answer 1

If the goal is just to return the value multiplied by 3, you can recover the string:

var cent = document.getElementById("Centesimas").firstChild.data;

Remove the character : with the function slice:

cent.slice(1); // Pega o conteúdo a partir do segundo caractere

And convert to an integer value:

parseInt(cent.slice(1));

Thus, its value will be integer and can do the multiplication. See in the code below:

var centesimas = 0;

function inicio() {
  control = setInterval(cronometro, 10);
  document.getElementById("inicio").disabled = true;
  document.getElementById("parar").disabled = false;
  document.getElementById("continuar").disabled = true;
  document.getElementById("reinicio").disabled = false;
}

function parar() {
  clearInterval(control);
  document.getElementById("parar").disabled = true;
  document.getElementById("continuar").disabled = false;
}

function reinicio() {
  clearInterval(control);
  centesimas = 0;
  document.getElementById("Centesimas").innerHTML = "|00|"
  document.getElementById("inicio").disabled = false;
  document.getElementById("parar").disabled = true;
  document.getElementById("continuar").disabled = true;
  document.getElementById("reinicio").disabled = true;
}

function cronometro() {
  if (centesimas < 99) {
    centesimas++;
    if (centesimas < 10) {
      centesimas = "0" + centesimas
    }
    document.getElementById("Centesimas").innerHTML = ":" + centesimas;
  }
  if (centesimas == 99) {
    centesimas = -1;
  }
}

function resultado() {
  var cent = document.getElementById("Centesimas").firstChild.data;
  document.getElementById("Result").innerHTML += parseInt(cent.slice(1)) * 3;
}

<div id="contador">
  <div class="reloj" id="Centesimas">:00</div>
  <input type="button" class="boton" id="inicio" value="&#9658;" onclick="inicio();">
  <input type="button" class="boton" id="parar" value="&#8718;" onclick="parar();" disabled>
  <input type="button" class="boton" id="continuar" value="&#8634;" onclick="inicio();" disabled>
  <input type="button" class="boton" id="reinicio" value="&#8635;" onclick="reinicio();" disabled>
  <input type="button" class="boton" id="resultado" value="Resultado" onclick="resultado();">
  <div class="reloj" id="Result"></div>
</div>

Answer 2

First I advise always check if the type of element you will work is a number:

function isNumber(n) {
  return !isNaN(parseFloat(n));
}

If this function returns true, the value of n is a valid number, if return false ai vc can delete the element.

To remove non-numeric characters from a string use the following regex:

value = value.replace(/[^\/\d]/g,'');