Seems to work fine in this snippet. Is there any more code you can share to debug?

function log() {
  console.log(document.getElementById('deposit-amount').value);
}

<div class="deposit">
  <h4>Deposit</h4>
  <input id="deposit-amount" type="number" placeholder="$ amount you want to deposit">
  <button id="deposit-btn" onclick="log()">Deposit</button>
</div>

<div class="box-1 common-box">
   <p>Deposit</p>
    <h2>$ <span id="current-deposit">01</span></h2>
 </div>
<div class="deposit">
       <h4>Deposit</h4>
         <input id="deposit-amount" type="number"  placeholder="$ amount you want to deposit">
           <button id="deposit-btn">Deposit</button>
</div>

const depositBtn = document.getElementById("deposit-btn");
depositBtn.addEventListener("click", function(){
    const depositAmount = document.getElementById("deposit-amount").value; 
    const depositNumber = parseFloat(depositAmount);
    const cuurentDeposit = document.getElementById("current-deposit").innerText;
    const currentNumber = parseFloat(cuurentDeposit);
    const total = depositNumber + currentNumber; 
    document.getElementById("current-deposit").innerText = total;
    document.getElementById("deposit-amount").value = "";

})

This works. but still when I console.log the name (depositAmount), it shows undefined.Is this because DOM isn't ready? How to resolve this? -@nemo