How do I value my input to appear in a div or <p> as number. But nothing appears. When it appears it is Nan

Question

<div class="container">
        <p id="p"></p>
        <input type="number" id="inputsaldo" value min="0" placeholder="" maxlength="10" required>
        <button id="btncheck"><i class="fas fa-grin-tongue-wink"></i></button>
</div>

<script>
let inputsaldo = parseFloat(document.getElementById('inputsaldo').value)
let button = document.getElementById('btncheck')
var p = document.getElementById('p').innerHTML 

console.log(typeof inputsaldo)

button.addEventListener('click', () =>{
    p = 'saldo: ' + inputsaldo;
});
</script>

Answer 1

some concepts that are failing you:

• let inputsaldo: the way you are using that value is read immediately when the page loads. I think what you want is to read the value when the button is clicked. Switches this line into the callback of the addEventListener.

• var p: when that line runs the p gets the html value of that element. Not a reference for writing inside p but its immediate value when the code is started.

I suggest you switch to:

<div class="container">
  <p id="p"></p>
  <input type="number" id="inputsaldo" value min="0" placeholder="" maxlength="10" required>
  <button id="btncheck"><i class="fas fa-grin-tongue-wink">Verificar</i></button>
</div>

<script>
  const button = document.getElementById('btncheck')
  const p = document.getElementById('p');

  console.log(typeof inputsaldo)

  button.addEventListener('click', () => {
    const inputsaldo = parseFloat(document.getElementById('inputsaldo').value)

    p.innerHTML = 'saldo: ' + inputsaldo;
  });
</script>

Answer 2

In your code Javascript needs some observations, the Javascript is executed from "top to bottom when the page is loaded", in the case of your code in the following line:

let inputsaldo = parseFloat(document.getElementById('inputsaldo').value)

This line is already executed as soon as the page is loaded, its goal is not to take an element reference <input id="inputsaldo"> and store in the variable inputsaldo soon when the page is loaded, I believe your goal is to do this when clicked on the element <button id="btncheck">, then it must be within the function Arrow Function that is being called at the event of click.

var p = document.getElementById('p').innerHTML

In the row above the variable p is storing a value like <p id="p">testando</p> and when clicked on the button the data will be overwritten to 'saldo: ' + inputsaldo what you need is a reference to be able to write inside the element <p id="p"></p> that in the case using the innerHTML when the button is clicked:

button.addEventListener('click', () => {
   p.innerHTML = 'saldo: ' + inputsaldo;
});

In case the code would stay like this so it could work:

Upshot

<div class="container">
    <p id="p"></p>
    <input type="number" id="inputsaldo" value min="0" placeholder="" maxlength="10" required>
    <button id="btncheck"><i class="fas fa-grin-tongue-wink"></i></button>
</div>

<script>
    let button = document.getElementById('btncheck')
    var p = document.getElementById('p');
    
    console.log(typeof inputsaldo)
    
    button.addEventListener('click', () =>{
        let inputsaldo = parseFloat(document.getElementById('inputsaldo').value)
        p.innerHTML = 'saldo: ' + inputsaldo;
    });
</script>