CODEWITHSUNDEEP
javascripthtmlcssaddeventlistener
Aurea Argaiz
Aurea Argaiz

Reputation: 61

Set value to an input with Javascript

I know there is a lot of this kind of question, but after reading and seeing my code for a long time, I don't understand what I am doing wrong. I added addEventListener with the purpose of not putting "onclick" in my html, and detecting the change, but at the time of showing the value obtained in my input, nothing is showing and I don't know why, I suspect that You are not entering any of the functions to convert. My Code:

<div class="box-numero-decimal">
  <h1>CONVERSOR DECIMAL</h1>
    <div class="input-numero">
      <input type="text" id="decimal" class="i-enable n-f">
    </div>
    <div class="box-boton">
      <div class="row">
        <div class="col-6 d-flex align-items-center">
          <label class="m-0" for="decimal">Ingrese el valor <b>decimal</b></label>
        </div>
        <div class="col-6">
          <button class="btn-style float-right n-f">calcular</button>
        </div>
      </div>                                    
    </div>
  </div>
  <div class="box-centrar">
     <div class="box-conversor-gral">
       <label class="etiqueta-max" for="r-binario">Binario</label>
       <input type="text" id="binario" class="i-disabled field left n-f" value="">
       <label class="etiqueta-max" for="r-octal">Octal</label>
       <input type="text" id="octal"class="i-disabled field left n-f" readonly value="">
       <label class="etiqueta-max" for="r-hexadecimal">Hexadecimal</label>
       <input type="text" id="hexadecimal"  class="i-disabled field left n-f" readonly value="">
      </div>
    </div>

Script:

const decimalCon = {
    binario : '0',
    octal : '0',
    hexadecimal : '0',
    bandera : false,
};

var sumbitInput = document.getElementById('box-boton');
var binarioR = document.getElementById('binario');
var octalR = document.getElementById('octal');
var hexadecimalR = document.getElementById('hexadecimal');

if(sumbitInput){
    sumbitInput.addEventListener("click", actualizar);
    sumbitInput.addEventListener("change", actualizar);
}

function actualizar(){
    const decimal = Number(document.getElementById('decimal').value);
    if (decimal !== 0){
        binarioR.value = convertirBinario(decimal);
        octalR.value = convertirOctal(decimal);
        hexadecimalR.value = convertirHexadecimal(decimal);
    }
}

//Decimal a Binario
function convertirBinario(n){
    let dividendo = n;
    let binario = '';
    while (dividendo != 0){
        binario = (dividendo % 2) + binario;
        dividendo = Math.floor(dividendo/2);

    }
    decimalCon.binario = binario;
}

Upvotes: 0

Views: 423

Answers (1)

Hamzeh
Hamzeh

Reputation: 311

change this code:

var sumbitInput = document.getElementById('box-boton');

to this:

var sumbitInput = document.querySelector('.box-boton');

and function convertirBinario must return the result so put return for it:

function convertirBinario(n){
        let dividendo = n;
        let binario = '';
        while (dividendo !== 0){
            binario = (dividendo % 2) + binario;
            dividendo = Math.floor(dividendo/2);

        }
       // decimalCon.binario = binario;
        return binario;
    }

You have also mentioned the functions that do not exist. In any case, the function convertirBinario will work by applying the above changes.

Upvotes: 1

Related Questions