Element Problem with char and number

Question

Element Problem with char and number

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I'm not able to do math operations with this function, obviously because it has char type 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 because of this, but I'd like to know if you can do this without removing char elements from within

javascript javascript-eventos

asked by anonymous 17.03.2017 / 18:57

2 answers

1

First I always advise to check if the type of element you are going to work on is a number:

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

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

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

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

17.03.2017 / 19:09

How to read a txt file sent by the user? Help in logic not to overlap a time range already exists in the base

score 2 · Accepted Answer

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

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

Remove the : character with the slice function:

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

And convert to an integer value:

parseInt(cent.slice(1));

So your value will be integer and you can do multiplication. See 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>