Question

完全披露，这是我参加的高级JS课程的作业。我已经试图在几个周末解决这个问题了，这让我发疯了！我比jQuery更熟悉jQuery（这是我参加这门课程的原因之一）。

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

我尝试制作一个小提琴，但点击Add Link按钮给了我一个POST错误（这可能是它的行为的线索？）。如果你削减＆amp;将代码粘贴到HTML文件中＆amp;运行它，你会看到我所描述的行为。

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

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

以下是代码：

<!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>

Answer 1

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

为什么我的网页上的链接和文字从此UL中消失了？

1 个答案: