无法在锚点内设置跨度的内容答案

【问题标题】：Can't set a span's content within an anchor无法在锚点内设置跨度的内容
【发布时间】：2020-03-02 22:08:38
【问题描述】：

我有这个字段。

<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 时，我收到以下错误： “未捕获的 TypeError：无法设置属性 'innerHTML' 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>

我到底做错了什么？

【问题讨论】：

你想通过在链接中放置一个跨度来做什么？
不能将元素放在其他元素的属性中。
所以我不能给 URL 添加值？

标签： javascript html dom innerhtml

【解决方案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;
    }

【讨论】：

我认为他可能试图更改 URL 以包含金额。
没错。只是想让用户更轻松。
@RickyD 好的，我更新了我的答案。我相信这就是你想要完成的目标

【解决方案2】：

您引用了 cart_total，但您的字段名为 amount
引号内的 span 是 textnode 的一部分，它不再是单独的 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>

【讨论】：

【解决方案3】：

你应该在调用之前声明函数的第一件事

   <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>

你不能在另一个元素属性中添加一个元素

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

【讨论】：

【解决方案4】：

另一种解决方案可能是这样的（我在 sn-p 中添加了注释）：

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>

【讨论】：