1

tengo un pequeño problema con mi código intentando hacerlo corto me decidí por usar parseInt para luego pasarlo por un toString(2) y completar la conversión numérica pero siempre responde NaN y no entiendo el porque de esto, si me pueden ayudar por favor eso me ayudaría a aprender y a avanzar como programador.

let convertToD = document.getElementById('convertToD');

convertToD.onclick = function decToBin() {
  let decimal = Number.parseInt(document.getElementById('decimalInput'));
  document.getElementById('numCovertB').innerHTML = decimal.toString(2);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>

  <div class="container" id="de">
    <h2>Decimal a Binario</h2>
    <input type="text" name="decimalInput" class="decimalInput">
    <input id="convertToD" type="button" value="Convert">
    <p class="in" id="numCovertB">Numero Binario</p>
  </div>

</body>
<script src="js/binary.js"></script>

</html>

3 respuestas 3

0

Estás haciendo doble conversión numérica aquí:

let decimal = Number.parseInt(document.getElementById('decimalInput'));

De la cual sería incorrecto, debería ser:

let decimal = Number(document.getElementById('decimalInput'));

También, estás declarando a convertToD fuera de la función, este debe estar dentro, ya que cuando se ejecuta la función decToBin en el evento clic del botón, el valor de la variable convertToD no se actualiza, y siempre permanecerá en 0. Estructurando bien tu código, quedaría de la siguiente forma (te explico en comentarios):

let botton = document.getElementById('botton'); // obtengo al botón

botton.onclick = function decToBin() { // cuando hago clic al botón, ejecuto la función...
  let convertToD = document.getElementById('convertToD').value; // y capturo el valor del input...
  let decimal = Number(convertToD); // al valor lo convierto a numérico...
  document.getElementById('in').innerHTML = decimal.toString(2); // y muestro el resultado en el id "in".
}
<div class="container" id="de">
  <h2>Decimal a Binario</h2>
  <input type="number" step="any" id="convertToD" />
  <input type="button" id="botton" value="Convert" />
  <p id="in">Numero Binario</p>
</div>

2
  • 1
    gracias ya entendí mis errores no conocía tampoco la propiedad step me ayudaste a entender varias cosas.
    – hawiezaki
    el 27 ene. 2023 a las 17:19
  • @hawiezaki Me alegro, el atributo step="any" es para permitir decimales en un input que es de type="number". el 27 ene. 2023 a las 17:19
0

Number.parseInt recibe una cadena de texto. Le estás enviando un objeto. Lo que tienes que enviarle es la propiedad value de ese objeto (que devuelve el texto de la caja de texto):

convertToD.onclick = function decToBin() {
  let decimal = Number.parseInt(document.getElementById('convertToD').value);
  document.getElementById('numCovertB').innerHTML = decimal.toString(2);
}
2
  • ahora me da este error: Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLInputElement.decToBin (binary.js:2:74)
    – hawiezaki
    el 27 ene. 2023 a las 16:09
  • @hawiezaki faltaba algo: la caja de texto de la que tomas el valor se llama convertToD. Ya lo cambié en la respuesta.
    – caprilo
    el 27 ene. 2023 a las 16:30
0

Tenias varios errores en algunos puntos cómo son en el body en el control input type textbox no tenias el id y en el código del javascript te faltaba poner el value y tampoco servia el Number delante del parseInt...

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="css/style.css">
      <title>Document</title>
    </head>

    <body>

      <div class="container" id="de">
        <h2>Decimal a Binario</h2>
        <input type="text" id="decimalInput" name="decimalInput" class="decimalInput" />
        <input id="convertToD" type="button" value="Convert" />
        <p class="in" id="numCovertB">Numero Binario</p>
      </div>


    <script>
    let convertToD = document.getElementById('convertToD');

    convertToD.onclick = function decToBin() {
      let decimal = parseInt(document.getElementById('decimalInput').value);
      document.getElementById('numCovertB').innerHTML = decimal.toString(2);
    }
    </script>
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.