how to display input value in javascript?

Question

Im trying to display the value that i type in the input field in the class "summe" so after i type something in the input field it would say "Amount:50".What do i need to add for that to happen?

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');

btncalc.addEventListener('click', function(){
    summetext.textContent = "Amount:";
});

<!DOCTYPE html>
<html lang="en">
  <body>
    Backendbenutzer: <input class='backenduser'></input><br>
    <span class='summe'>0.00</span><br>
    <button class='calcit'>Berechnen</button>
    <script src="./app.js"></script>
  </body>
</html>

`summetext.textContent = "Amount: " + document.querySelector('.backenduser').value;` — 0stone0, Jul 05 '22 at 10:13
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — 0stone0, Jul 05 '22 at 10:13
Get the input in javascript (similar to how you got it your button as btnCalc) and access the input value by `input.value` (assuming your input variable name is `input`) — kemicofa ghost, Jul 05 '22 at 10:14

score 0 · Answer 1 · answered Jul 05 '22 at 10:17

0

This should work Let inputValue = document.querySelector('backenduser').value

Let summe = document.querySelector('summe') summe.textContent = inputValue

answered Jul 05 '22 at 10:17

Adehunoluwa Praise

36
7

score 0 · Accepted Answer · answered Jul 05 '22 at 10:18

You also need to read the value of that input so I used class selector (with [0] to indicate the first occurance) and appended it to the text:

const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');

btncalc.addEventListener('click', function(){
    var amount= document.getElementsByClassName("backenduser")[0].value;
    var mytext="Amount:" + amount ;
    summetext.textContent = mytext;
});

<!DOCTYPE html>
<html lang="en">
  <body>
    Backendbenutzer: <input class='backenduser'></input><br>
    <span class='summe'>0.00</span><br>
    <button class='calcit'>Berechnen</button>
    <script src="./app.js"></script>
  </body>
</html>

so the class selector [0] will display the first value put in and append it to the text? — programmnoob, Jul 05 '22 at 10:32
Class selector returns an array of objects. You may use an ID selector or using a class selector you need to indicate the order of element. [0] returns the first occurance. @programmnoob — Ali Sheikhpour, Jul 05 '22 at 10:47

score 0 · Answer 3 · answered Jul 05 '22 at 10:26

You can print, the input value "textbox" as below.

        const btncalc = document.querySelector('.calcit');
        const sourceText = document.getElementById('source');
        const summetext = document.querySelector('.summe');
        
        const inputHandler = function(e) {
          summetext.innerText = parseFloat(e.target.value).toFixed(2);
        }
        
        btncalc.addEventListener('click', function(){
            summetext.textContent = "Amount:" + summetext.innerText ;
        });
        
        sourceText.addEventListener('input', inputHandler);

<!DOCTYPE html>
    <html lang="en">
      <body>
        Backendbenutzer: <input id="source" class='backenduser'></input><br>
        <span class='summe'>0.00</span><br>
        <button class='calcit'>Berechnen</button>
        <script src="./app.js"></script>
      </body>
    </html>

how to display input value in javascript?

3 Answers3