Take function result and insert into an Input type text (html)

Question

Hello, I have a slight problem with my HTML and JS code. I need to insert the result of a function(JS) into an input(Html). But I’m not getting it... I tried that way:

HTML:

<p>Preço USD$: <input type="text" id="preco"  ></p>

JS:

 function total(){
            var quantidade = Number(document.getElementById('cQtd'))
            var tot = quantidade * 500
            document.getElementById('preco').value = tot
        }

The code above is not working... Any idea how to solve such a problem?

Answer 1

You are incorrectly using the element query

document.getElementById('cQtd')

This code above you are only recovering and the variable of the DOM element, not the internal value itself.

To retrieve the numerical value of this element, you need to understand if it is an input or if the value is as text internally (internal HTML)

If it is as value, you can recover as follows:

var quantidade = Number(document.getElementById('cQtd').value)

If it is an element like a span and you want to recover the value inside it, you can use it here:

var quantidade = Number(document.getElementById('cQtd').innerText)

Example of the above use:

HTML

<span id="idSpan">123456</span>

JS

const valorDoSpan = Number(document.querySelector("#idSpan").innerText)

or

const valorDoSpan = Number(document.getElementById("idSpan").innerText)

It may also be that there is more than one element with the id price and you are changing another element, but I believe that the most likely is the recovery of that amount

NOTE: Avoid using var, prefer to use the Let or the const (depending on the need, of course)

Answer 2

Only the .value in your code

Example applied to a drop-down list:

function total(){
    let quantidade = Number(document.getElementById('cQtd').value)
    let tot = quantidade * 500
    document.getElementById('preco').value = tot
   }
        

<p>Preço USD$: <input type="text" id="preco"></p>

<p>Quantidade: 
<select id="cQtd" onchange="total()">
   <option>Quantidade</option>
   <option>10</option>
    <option>20</option>
</select>
</p>

In Javascript, an object is an independent entity, with properties and types. Compare it with a cup, for example. A cup is an object with properties. A cup has a color, a shape, weight, a composition material, etc. Similarly, Javascript objects can have properties, which define their characteristics.

Using the value property

Thinking of a textbox, password, textarea or select HTML control, we can use the property value, it refers to the value of the field.

If there is no need to use a variable we can , then access the property directly, see example:

variavel = document.getElementById('cQtd').value

Otherwise

quantidade = document.getElementById("nome-identificador");

Reclaiming the value of:

variavel = quantidade.value

Objects and properties

Document.getElementById()