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

我的目标是在动画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/

10-12 12:39
查看更多