how to display input value in javascript?

July 5, 2022

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>

>Solution :

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>