如何触发Span元素填充在“输入”字段（Javascript）中输入的值

Question

I'm creating a Bookmarklet for a webpage and have come across a Span id="totalAmount" element (summary table) that normally populates after a value is manually entered into an Input field (id="Amount") by clicking into it and typing the value. I can successfully enter the value using the Bookmarklet but the Span id="totalAmount" element is not being populated. What am i missing?

This is the HTML

<input id="Amount" class="with-prefix sum-amount" type="tel" value="" name="Amount" data-val-required="Please enter your amount" data-val-regex-pattern="^\d*\.?\d{0,2}$" data-val-regex="Please enter the amount" data-val-reasonableincome="" data-val-number="The field What is your amount? must be a number." data-val="true" aria-describedby="AmountTooltip"/>

<div class="summary-table clearfix">
<div class="summary-table-item">
<span class="text">Total amount</span>
<span class="curr-sign">£</span>
<span id="totalAmount" class="value"/>
</div>

When entering value into Input field manually, the span element gets the same value populated and the code changes to:

<span id="totalAmount" class="value">25000.00</span>

But when I use following Bookmarklet, although the Input field is successfully entered with a value, the "totalAmount" Span isn't getting populated

javascript: var newPage = {
    formFill: function() {
        document.querySelectorAll("#Amount")[0].value = '25000';
    }
};
newPage.formFill()

NOTE : I'm unable to modify the HTML due to permissions

Much appreciated

Answer 1

span is not the input element, it has innerHTML , not value

document.getElementById( "Amount" ).onchange = function(){
   document.getElementById("totalAmount").innerHTML = this.value;
}

Answer 2

Firstly the span is not closed properly. Please correct that.

The query is happening on Input element and not span.

And if you want the span to populate the value entered in the input element. You have to write a function that does the calculation. This can be bound to a keyboard event.

Answer 3

// use this code and close span tag.

javascript: var newPage = {
  formFill: function() {
     document.querySelectorAll("#Amount")[0].value  = '25000';
     document.getElementsByClassName(".curr-sign").textContent = '25000';
     document.getElementById("totalAmount").textContent = "25000";
  }
};
newPage.formFill();