在 html 中添加属性时出错。我该如何解决？答案

【问题标题】：Error with adding an attribute in html. How can i do fix it?在 html 中添加属性时出错。我该如何解决？
【发布时间】：2020-06-04 05:47:39
【问题描述】：

我正在尝试使用Skype 与Html 和javascript 进行聊天。这里的问题是我无法将属性 href 添加到我的 id。

这是我的代码：

function el(elementId, username, action) {
    document.getElementById(elementId).setAttribute("href", "skype:" + username + "?" + action);
}

function buildLinkRefs() {
    var username = document.getElementById("username").value;

    el("call-btn", username, "call");
    el("add-to-contacts-btn", username, "add");
    el("view-profile-btn", username, "userinfo");
    el("voice-email-btn", username, "voicemail");
    el("chat-btn", username, "chat");
    el("sendfile-btn", username, "sendfile");
}

document.getElementById("username").addEventListener("change", function () {
    buildLinkRefs();
}, false);

buildLinkRefs();

    <input type="text" id="username" value="echo123"/><br>
    <br>
    <a id="call-btn">Call</a> <br>
    <a id="add-to-contacts-btn">Add to contacts</a> <br>
    <a id="view-profile-btn">View User Profile</a> <br>
    <a id="voice-email-btn">Voice Email</a> <br>
    <a id="chat-btn">Start Chat</a> <br>
    <a id="sendfile-btn">Send File</a> <br>

【问题讨论】：

你遇到了什么错误？
<a> 标签上的href 不需要setAttribute，只需调用document.getElementById(elementId).href = ...
您的示例仅在输入用户名时无法加载，在您的事件侦听器中将change 更改为input 或keyup。
抱歉没把问题说清楚。所以，我的问题是我不能用我的脚本来引用，我不明白为什么。
根本没有修复@asdru

标签： javascript html href

【解决方案1】：

您使用了错误的事件侦听器。文本输入应该使用“keyup”，而不是“change”

document.getElementById('username').addEventListener('keyup', buildLinkRefs );

因此，使用您的代码，它应该如下所示：

function el(elementId, username, action) {
    document.getElementById(elementId).setAttribute("href", "skype:" + username + "?" + action);
}

function buildLinkRefs() {
    var username = document.getElementById("username").value;

    el("call-btn", username, "call");
    el("add-to-contacts-btn", username, "add");
    el("view-profile-btn", username, "userinfo");
    el("voice-email-btn", username, "voicemail");
    el("chat-btn", username, "chat");
    el("sendfile-btn", username, "sendfile");
}

document.getElementById("username").addEventListener("keyup", buildLinkRefs );

buildLinkRefs();

<input type="text" id="username" value="echo123"/><br>
    <br>
    <a id="call-btn">Call</a> <br>
    <a id="add-to-contacts-btn">Add to contacts</a> <br>
    <a id="view-profile-btn">View User Profile</a> <br>
    <a id="voice-email-btn">Voice Email</a> <br>
    <a id="chat-btn">Start Chat</a> <br>
    <a id="sendfile-btn">Send File</a> <br>

【讨论】：

感谢您的回答，但更改 keyup 并没有将 href 添加到我的 :(
我只是注意到，如果我在这个响应上运行代码，我会得到我需要的。也许它在我的电脑上。

【解决方案2】：

问题是您的函数在整个页面加载之前触发，因此它看不到元素username，因为该元素不可用。所以有很多方法可以解决它.只需将代码放在 html 元素之后或下方，如下所示：

<html>
 <head>
    <title>the title</title>
 </head>
     <body>
       <input type="text" id="username" value="echo123"/><br>
   <br>
    <a id="call-btn">Call</a> <br>
    <a id="add-to-contacts-btn">Add to contacts</a> <br>
    <a id="view-profile-btn">View User Profile</a> <br>
    <a id="voice-email-btn">Voice Email</a> <br>
    <a id="chat-btn">Start Chat</a> <br>
    <a id="sendfile-btn">Send File</a> <br>

    <!-- ### PLACE HERE YOUR CODE AFTER YOUR HTML CONTENT     -->
    <script type="text/javascript" language="javascript">
         function el(elementId, username, action) {
             document.getElementById(elementId).setAttribute("href", "skype:" + 
              username + "?" + action);
         }

    function buildLinkRefs() {
        var username = document.getElementById("username").value;

        el("call-btn", username, "call");
        el("add-to-contacts-btn", username, "add");
        el("view-profile-btn", username, "userinfo");
        el("voice-email-btn", username, "voicemail");
        el("chat-btn", username, "chat");
        el("sendfile-btn", username, "sendfile");
      }

     document.getElementById("username").addEventListener("change", function () {
         buildLinkRefs();
     }, false);

    buildLinkRefs(); 
</script>

【讨论】：