为什么我的网页上这个UL的链接和文本消失了

Why are the links and text disappearing from from this UL on my webpage?

本文关键字：链接 文本 消失了 UL 我的 网页 为什么      更新时间：2023-09-26

完全披露，这是我正在参加的高级JS课程的作业。 几个周末我一直在试图弄清楚这一点，这让我发疯！ 我对jQuery的熟悉程度远远超过我对JS的熟悉程度（这也是我参加这门课的原因之一）。

网页应该从用户那里获取输入，以创建一个<UL>的链接列表，其中包含与链接相关的其他一些字符串。 这部分工作得很好，我不知道的是为什么一旦我完成单击Add Link按钮，新链接就会非常简短地显示，然后消失！ 如果我非常快速地点击按钮，我可以让其中几个出现，但是一旦我停下来，它们就会消失。

我试着用这个来摆弄一下，但是单击Add Link按钮给了我一个开机自检错误（这可能是它行为的线索？ 如果你将代码剪切并粘贴到HTML文件中并运行它，你会看到我描述的行为。

我认为它与 init（） 函数有关，所以我尝试在<body>底部运行它，但这没有任何区别。 我也尝试在没有 init 的情况下运行它，但无法弄清楚如何初始化 onclick 侦听器，即使它在<body>底部运行。 我注意到，即使我在全局范围内定义favesList，在应该用值初始化后，它仍然显示为未定义（至少从我的角度来看）。 但是，看起来它超出了范围，这对我来说没有意义。 控制台.log没有为我提供它消失的原因，或者我还没有找到记录事件的方法。

我

有理由确定我错过了一个基本的东西（比如它由于某种原因超出了范围？），所以如果有人能指出那件事是什么，我将不胜感激（我也不需要明确的答案，只是朝着正确的方向推动，这基本上是家庭作业，我知道我应该自己解决这个问题， 但我认为我时间的几个星期天正在给它大学尝试）。

代码如下：

<!doctype html>
<html>
<head>
  <title>Advanced JavaScript Project: Favorites and Tags</title>
  <meta charset="utf-8">
  <style>
    body {
        font-family: Helvetica, Ariel, sans-serif;
    }
    form {
        display: table;
        border-spacing: 5px;
        width: 40%;
    }
    form p {
        display: table-row;
    }
    form label {
        display: table-cell;
        text-align: right;
    }
    form input {
        display: table-cell;
        width: 95%;
    }
    span.comment {
        font-size: 80%;
        color: #777777;
    }
    span.tags {
        font-size: 80%;
        color: rgb(48, 99, 170);
    }
    #submit {
        width: 20%;
    }
  </style>
  <script>
    window.onload = init;
    var favesList;
    console.log(favesList);
    function init() {
        //get submit button handle
        var submit = document.getElementById("submit");
        //add click handler to button to call method to add text to the list
        submit.onclick = AddFavorite;
        console.log("back in init");
    }
    function favorite(url, title, comment, tags){
        console.log(this);
        this.url = url;
        this.title = title;
        this.comment = comment;
        this.tags = tags;
        console.log(this);
    }
    function AddFavorite(){
        var f = new favorite(
            document.getElementById("url").value, 
            document.getElementById("title").value, 
            document.getElementById("comment").value, 
            document.getElementById("tags").value);
        console.log(f);
        favesList = document.getElementById("list");
        console.log(favesList);
        var node = document.createElement("LI");
        var a = document.createElement('a');
        a.appendChild(document.createTextNode(f.title));
        a.href = f.url;
        console.log(a);
        node.appendChild(a);
        node.appendChild(document.createTextNode(f.comment));
        node.appendChild(document.createTextNode(f.tags));
        console.log(node);
        favesList.appendChild(node);
        console.log(favesList);
    }
  </script>
</head>
<body>
    <h1>Tag and save your favorites</h1>
    <form id="form">
     <fieldset>
      <legend>Add a new favorite:</legend>
      <label for="url">URL:</label>
      <span><input id="url" type="url" placeholder="http://www.cnn.com" value="http://www.cnn.com"></span><br>
      <label for="title">Title:</label>
      <input id="title" type="text" value="CNN World News"><br>
      <label for="comment">Comment:</label>
      <input id="comment" type="textarea" value="Thoughts?"><br>
      <label for="tags">Tags:</label>
      <input id="tags" type="text" value="Enter keywords separated by commas"><br>
      <input id="submit" type="submit" value="Add Link">
     </fieldset>
    </form>
    <br>
    <h1>List of favorites</h1>
    <ul id="list"></ul>
</body>
</html>

您需要return false;作为AddFavorite()方法的最后一行，以阻止浏览器处理按钮并刷新页面。

相关文章：