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>
您使用了错误的事件侦听器。文本输入应使用“键”,而不是“更改”
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>
问题是您的函数在加载整个页面之前已被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>