我是一个自学成才的初学者。
我的目标是在动画gif中更好地解释,如下所示:
以下是一些其他准则:
单击“添加链接”按钮时,应显示该表格。
如果输入的URL并非以“ http://”或“ https://”开头,则会在其开头添加“ http://”。
当用户验证新链接时,它将被添加到页面顶部,添加表单消失,并且显示一条信息消息2秒钟。
这是到目前为止我尝试过的代码:
index.html
<body>
<h1>Activity</h1>
<div id="alert"></div>
<div id="jax">
<button id="addLink" onclick="sendTheAJAX()" class="button">Add link</button>
</div>
<div id="content"></div>
<script src="../js/weblinks.js"></script>
</body>
weblinks.js
var linkList = [
{
title: "Kottke",
url: "http://kottke.org",
author: "brett.suggs"
},
{
title: "National Geographic",
url: "http://www.nationalgeographic.com",
author: "jessica"
},
{
title: "American Museum of Natural History",
url: "http://www.amnh.org",
author: "aurora.nicole"
}
];
function createLinkElement(link) {
var linktitle = document.createElement("a");
linktitle.href = link.url;
linktitle.style.color = "#428bca";
linktitle.style.textDecoration = "none";
linktitle.style.marginRight = "5px";
linktitle.appendChild(document.createTextNode(link.title));
var linkUrl = document.createElement("span");
linkUrl.appendChild(document.createTextNode(link.url));
var titleLine = document.createElement("h4");
titleLine.style.margin = "0px";
titleLine.appendChild(linktitle);
titleLine.appendChild(linkUrl);
var detailsLine = document.createElement("span");
detailsLine.appendChild(document.createTextNode("Added by " + link.author));
var linkDiv = document.createElement("div");
linkDiv.classList.add("link");
linkDiv.appendChild(titleLine);
linkDiv.appendChild(detailsLine);
return linkDiv;
}
var content = document.getElementById("content");
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var request = new XMLHttpRequest();
request.open('GET', 'addLink.html');
request.onreadystatechange = function () {
if (request.readyState === 4) {
document.getElementById('jax').innerHTML = request.responseText;
}
};
function sendTheAJAX() {
request.send();
document.getElementById('addLink').style.display = 'none';
}
function checkURL (abc) {
var string = abc.value;
if (!~string.indexOf("http://")) {
string = "http://" + string;
}
abc.value = string;
return abc
}
function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var alert = document.getElementById("alert");
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}
addLink.html
<form>
<input type="text" name="name" id="name" placeholder="Your Name">
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title">
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL">
<button type="submit" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
我的问题是:
1)在checkURL函数部分中,我尝试通过以下方式添加“ https://”:
if (!~string.indexOf("http://"|"https://")) {
string = "http://" + string;
}
没用让它变得更糟。
2)如何将用户输入从addLink.html中的表单添加到js中的linkList中?
3)如何显示信息消息“链接已成功添加” 2秒钟?
注意:我不是从头开始构建代码,而是提供了基本代码。
最佳答案
"http://"|"https://"
用JS计算为0
。也许您误解了逻辑OR(||
)与按位OR(|
)?不过,indexOf
在这里似乎有点麻烦,我建议改用regex并将checkURL
重写为:
function checkURL (str) {
if (str.value && !/^https?\:\/\//i.test(str.value)) {
str.value = "http://" + str.value;
}
}
实际上,您是将表单中的用户输入添加到linkList中,但是由于您使用按钮
type="submit"
,因此每次单击都会提交表单,并导致页面重新加载。而是在您的addLink.html中使用type="button"
:<form>
<input type="text" name="name" id="name" placeholder="Your Name" />
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title" />
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL" />
<button type="button" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
或
return false
函数中的onSubmit
或在其顶部使用preventDefault
。现在,消息应该可以正常显示,但是与此同时,您需要再次将现有列表附加到自身。您应该只添加最后一个元素,或者清除
content
元素并“重新渲染”整个列表:function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
content.innerHTML = ""; // clearing the content div
linkList.forEach(function (link) {
content.appendChild(createLinkElement(link));
});
var alert = document.getElementById("alert"); // can be taken outside the function, as it is engough to get it once
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}
关于javascript - 如何接受用户输入,将其添加到列表对象,然后显示消息2秒钟?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46466443/