Set value to an input with Javascript

Question

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;
}

I can't see any element with an ID of box-boton

WizardCoder
– WizardCoder

2020-02-03 23:41:04 +00:00
Commented Feb 3, 2020 at 23:41 — WizardCoder
– WizardCoder, Commented Feb 3, 2020 at 23:41
That's the reason! thanks a lot

Aurea Argaiz
– Aurea Argaiz

2020-02-03 23:50:32 +00:00
Commented Feb 3, 2020 at 23:50 — Aurea Argaiz
– Aurea Argaiz, Commented Feb 3, 2020 at 23:50

Hamzeh · Accepted Answer · 2020-02-04 01:00:24Z

1

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.

answered Feb 4, 2020 at 1:00

Hamzeh

3114 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set value to an input with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related