0

Estoy realizando unos ejercicios que me solicitan que ingrese un input en html y que lo llame desde javascript.

La función debe de convertir un carácter ingresado en el input de html y convertirlo en decimal y hexadecimal a su vez la conversión debe hacerse en binario y ser almacenada en una id diferente(una tabla), estoy totalmente perdido.

En el js intente hacer esto pero no me lo lee correctamente:

var caracters=[];

function caracteradecimal() {
    var caracteradecimal= document.getElementById("caracter").Value;
    caracteradecimal = caracters.toString(2); // A la base 2
    console.log("El número decimal %s en binario es %s", caracters, caracteradecimal);
}
<label for="caracter">Ingrese un caracter</label><br>
<input id="caracter">
<br>
<button onclick="caracteradecimal()">ALMACENAR</button>

2 respuestas 2

1

El primer error que tienes en tu código es el typo al momento de querer leer el valor del input, debe ser .value -en minúscula- y no .Value.

Después debes de tener claro que el método .toString() no tendrá el mismo comportamiento siempre, pues depende del tipo de dato sobre el que lo estés llamando. Cuando lo llamas sobre una cadena, .toString() precticamenta hará nada, pues no recibe parámetros. Pero si lo llamas sobre un número, el método .toString() devuelve una cadena que representa al número en la base especificada (la cual se recibe como parámetro). Entonces para poder hacer ese cambio de base, si o si, debes de llamarlo en un número.

Para el caso de los binarios, lo que puedes hacer es apoyarte de .padStart() para "formatear" el número a cierta cantidad de longitud y que sea más legible, en este ejemplo puedes mostrar los 8 primeros valores binarios.

function caracterABinario() {
  let caracterADecimal = parseInt(document.getElementById("caracter").value);
  let decimalABinario = caracterADecimal.toString(2).padStart(8, '0'); // A la base 2
  console.log("El número decimal %s en binario es %s", caracterADecimal, decimalABinario);
}

Mismo caso para los hexadecimales, lo único que cambia es la base y para que se vea más "bonito" lo muestras en mayúsculas con .toUpperCase.

function caracterAHexadecimal(caracter) {
  let caracterADecimal = parseInt(document.getElementById("caracter").value);
  let decimalAHexadecimal = caracterADecimal.toString(16).toUpperCase(); // A la base 16
  console.log("El número decimal %s en hexadecimal es %s", caracterADecimal, decimalAHexadecimal);
}

Si refactorizas un poco el código final podría ser algo como esto (aún puedes reducir más cosas):

caracteres = [];

function convertirCaracter() {
  let decimal = parseInt(document.getElementById('caracter').value);
  let binario = caracterABinario(decimal);
  console.log('El número decimal %s en binario es %s', decimal, binario);
  let hexadecimal = caracterAHexadecimal(decimal);
  console.log('El número decimal %s en hexadecimal es %s', decimal, hexadecimal);
  caracteres.push({decimal, binario, hexadecimal});
  popularTabla(caracteres);
}

function popularTabla(elementos) {
  const tablaElementos = document.getElementById('elementos');
  tablaElementos.innerHTML = '';
  let fila;
  elementos.forEach((valor, index) => {
    fila = `<tr id="${index}"><td>${index}</td><td>${valor.decimal}</td><td>${valor.binario}</td><td>${valor.hexadecimal}</td></tr>`;
    tablaElementos.innerHTML += fila;
    fila = '';
  });
}

function caracterABinario(decimal) {
  return decimal.toString(2).padStart(8, '0');
}

function caracterAHexadecimal(decimal) {
  return decimal.toString(16).toUpperCase();
}
<label for="caracter">Ingrese un caracter</label><br>
<input id="caracter">
<br>
<button onclick="convertirCaracter()">ALMACENAR</button>
<br>
<table><thead><tr><td>Id</td><td>Decimal</td><td>Binario</td><td>Hexadecimal</td></tr></thead><tbody id="elementos"></tbody></table>

1
  • Gracias por tu tiempo, me ayudo tu explicación!! Saludos. el 12 jun. 2021 a las 3:59
1

Uno de tus problemas está en .Value cuando es .value. El valor de entrada de por sí ya viene como String pero debes convertirlo a numérico y después usar el método .toString(base) para convertirlo a la base que tu desees.

Puedes crear dinámicamente una tabla (como yo lo hice) para presentar tus resultados o puedes usar identificadores en tu tabla para asignarles el valor desde JS.

Muy importante, debes averiguar como manejar la entrada para posibles errores, por ejemplo, pueda que el usuario no ingrese un número, lo cuál dará error a la hora de realizar las conversiones.

function caracterADecimal() {
    let input= document.getElementById("caracter").value;  // la entrada es del tipo String
    // convertir a decimal
    console.log(input);
    let decimal = parseInt(input);
    let hexadecimal = decimal.toString(16);    
    let binario = decimal.toString(2); 
    document.getElementById("resultados").innerHTML= `
    <table id= tabla>
      <caption>Resultados</caption>
      <tr>
       <td>Decimal</td>
       <td>${decimal}</td>
      </tr>
     <tr>
       <td>Hexadecimal</td>
       <td>${hexadecimal}</td>
      </tr>
      <tr>
        <td>Binario</td>
        <td>${binario}</td>
      </tr>  
    </table>
    `;
 }
<label for="caracter">Ingrese un caracter</label>
<br>
<input id="caracter">
<br>
<button onclick="caracterADecimal()">ALMACENAR</button>
<br><br><br>
<div id="resultados"></div>

3
  • Para evitar errores cuando no se introduce un número, puedes agregar || 0 al final de la asignación: let decimal = parseInt(input) || 0;
    – Triby
    el 11 jun. 2021 a las 22:22
  • Gracias por la contribución Triby
    – WilsonPT
    el 12 jun. 2021 a las 2:26
  • Gracias por tu tiempo, me ayudo tu explicación!! Saludos. el 12 jun. 2021 a las 3:59

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.