Question

我是一名自学成才的初学者。

我的目标是在动画gif中更好地解释，如下图所示：

以下是一些其他指南：

单击按钮＆＃34;添加链接＆＃34;。
如果输入的网址不以＆＃34; http：//＆＃34;开头或者＆＃34; https：//＆＃34;，它添加＆＃34; http：//＆＃34;在开头。
当用户验证新链接时，它会添加到页面顶部，添加表单将消失，并显示一条信息消息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功能部分，我尝试添加＆＃34; https：//＆＃34;通过：

if (!~string.indexOf("http://"|"https://")) {
    string = "http://" + string;
  }

它不起作用。只是让它变得更糟。

2）如何将addLink.html中表单的用户输入添加到js中的linkList中

3）如何显示信息消息＆＃34;链接已成功添加＆＃34; 2秒钟？

注意：我没有从头开始构建代码，提供了基本代码。

Answer 1

我可以帮助您检查URL是否指定了http或https协议。请参阅下面的代码段，它使用正则表达式检查提供的字符串是以http://还是https://开头。如果两个协议都未指定，它将在http://前加上字符串。

function checkURL (abc) {
  var string = abc.value,
      protocolRegex = /^https?:\/\//i;
  if (protocolRegex.test(string)) {
    return;
  }
  
  abc.value =  `http://${string}`;
}

var
  entries = [
    {value: 'http://stackoverflow.com'},
    {value: 'https://stackoverflow.com'},
    {value: 'stackoverflow.com'}
  ]
  
entries.forEach(entry => {
  checkURL(entry);
  console.log(entry.value);
});

Answer 2

category在JS中评估create。也许你误解了逻辑OR（create）与按位OR（"http://"|"https://"）？不过，0似乎有些麻烦，我建议改用helper types并重写||：

实际上，您正在将表单中的用户输入添加到linkList中，但由于您使用了按钮indexOf，因此您每次点击都会提交表单并导致页面重新加载。而是在 addLink.html ：

checkURL

function checkURL (str) {
     if (str.value && !/^https?\:\/\//i.test(str.value)) {
         str.value = "http://" + str.value;
     }
}

type="submit"

或type="button"或在其顶部使用regex。

现在消息应该显示正常，但同时您再次附加现有列表。您应该只添加最后一个元素或清除<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>元素和＆＃39;重新渲染＆＃39;整个清单：

return false

Answer 3

在indexOf函数调用中尝试使用正则表达式 - 例如：

if (!~string.indexOf(/(http:\/\/|https:\/\/)/i)) {
  string = "http://" + string;
}

我认为你不需要逃离结肠，但我的记忆在这里消失了。

如何获取用户输入，将其添加到列表对象，然后显示消息2秒钟？

3 个答案: