Не удается установить содержимое диапазона в привязке

Question

У меня есть это поле.

<input type="text" name="amount" id="amount" value="20.00">

У меня есть эта ссылка.

<a target='_blank' href="https://PayPal.me/MyAccount/<span id='myspan'>0.00</span>">click here</a>

Когда я пытаюсь вставить значение суммы ($ 20,00) в myspan, я получаю эту ошибку: "Uncaught TypeError: Невозможно установить свойство 'inner HTML' of null"

Я использую Javascript, который находится внизу файла.

    <script type ="text/javascript">
    window.addEventListener('load', function () {
      myFunction();
    })

    function myFunction() {
     var thisamount = document.getElementById("cart_total").value;
     alert(thisamount);
     document.getElementById("myspan").innerHTML = thisamount;
    }
    </script>           

Что, черт возьми, я делаю не так?

Answer 1

Ваш якорь должен выглядеть следующим образом
<a target='_blank' id="myHref" href="#"><span id='myspan'>0.00</span>USD</a>

затем

function myFunction() {
     var thisamount = document.getElementById("cart_total").value;
     alert(thisamount);
     document.getElementById("myHref").href = `https://PayPal.me/MyAccount/${thisamount}`;
     document.getElementById("myspan").innerHTML = thisamount;
    }

Answer 2

Другим решением может быть что-то вроде этого (я помещаю заметки внутри фрагмента):

document.querySelector('#amount').addEventListener('change', function() { // add change event to the input in order to update the current href
    document.querySelector('#sendMoney').setAttribute('href', 'https://PayPal.me/MyAccount/'+this.value+'USD'); // set the href 
    document.querySelector('#sendMoney').textContent = this.value+'$'; // set text content with current value
});

<label for="amount">Set amount</label>
<input type="number" name="amount" id="amount" value="20.00" />
<br />
<a id="sendMoney" href="https://PayPal.me/MyAccount/" target="_blank"></a>

Answer 3

1. первое, что вы должны объявить функцию перед вызовом

      <script type ="text/javascript">
       function myFunction() {
        var thisamount = document.getElementById("cart_total").value;
        alert(thisamount);
        document.getElementById("myspan").innerHTML = thisamount;
       }
   
      window.addEventListener('load', function () {
       myFunction();
      })
     </script>
   

2. вы не можете добавить элемент в другой атрибут элемента

   <a target='_blank' href="https://PayPal.me/MyAccount">
   <span id='myspan'>0.00</span>
   

Answer 4

1. Вы ссылались на cart_total, но ваше поле названо сумму
2. Интервал внутри кавычек является частью текстового узла, он больше не является отдельным узлом DOM

    window.addEventListener('load', function () {
        myFunction();
    });

    function myFunction() {
        var thisamount = document.getElementById("amount").value;
        console.log("thisamount", thisamount);
        let url = `https://PayPal.me/MyAccount/${thisamount}usd`;
        console.log("url", url);
        document.getElementById("paypalLink").setAttribute("href", url);
    }

<input type="text" name="amount" id="amount" value="$20.00">
<a id="paypalLink" target='_blank' href="https://PayPal.me/MyAccount/">Pay Me!</a>