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

问题描述 投票:1回答:2

im试图使用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>
javascript html href
2个回答
1
投票

您使用了错误的事件侦听器。文本输入应使用“键”,而不是“更改”

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>

0
投票

问题是您的函数在加载整个页面之前已被fired,因此由于该元素不可用而无法看到元素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>

© www.soinside.com 2019 - 2024. All rights reserved.