Fatal编程技术网
  • javascript/
  • Javascript 为什么我的网页上的链接和文本会从UL中消失？

Javascript 为什么我的网页上的链接和文本会从UL中消失？

javascript html

Javascript 为什么我的网页上的链接和文本会从UL中消失？,javascript,html,Javascript,Html,完全公开，这是我正在学习的一门高级JS课程的作业。几个周末我一直在想办法解决这个问题，这让我快发疯了！我对jQuery的熟悉程度远远超过了对JS的熟悉程度（这也是我选择上这门课的原因之一） 该网页应该从用户那里获取输入，以创建一个链接列表，其中包含与该链接相关的一些其他字符串。这部分工作正常，但我不明白的是，为什么我一点击添加链接按钮，新链接就会显示得很短，然后消失！如果我很快点击按钮，我可以让其中几个出现，但一旦我停下来，它们都消失了 我试着用这个做一把小提琴，但是点击addlink按钮给了我

完全公开，这是我正在学习的一门高级JS课程的作业。几个周末我一直在想办法解决这个问题，这让我快发疯了！我对jQuery的熟悉程度远远超过了对JS的熟悉程度（这也是我选择上这门课的原因之一）

该网页应该从用户那里获取输入，以创建一个链接列表，其中包含与该链接相关的一些其他字符串。这部分工作正常，但我不明白的是，为什么我一点击
添加链接按钮，新链接就会显示得很短，然后消失！如果我很快点击按钮，我可以让其中几个出现，但一旦我停下来，它们都消失了

我试着用这个做一把小提琴，但是点击
addlink
按钮给了我一个POST错误（这可能是它行为的线索？）。如果您将代码剪切并粘贴到HTML文件中并运行它，您将看到我描述的行为

我认为它与init（）函数有关，所以我尝试在
的底部运行它，但没有任何区别。我还尝试在没有init的情况下运行它，但不知道如何初始化onclick侦听器，即使它运行在
的底部。我注意到，尽管我在全局范围内定义了
favesList
，但它在应该用值初始化之后仍然显示为未定义（至少在我看来是这样）。然而，它看起来似乎超出了范围，这对我来说毫无意义。Console.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>




高级JavaScript项目：收藏夹和标记
身体{
字体系列：Helvetica、Ariel、无衬线；
}
形式{
显示：表格；
边界间距：5px；
宽度：40%；
}
表格p{
显示：表格行；
}
表格标签{
显示：表格单元格；
文本对齐：右对齐；
}
表单输入{
显示：表格单元格；
宽度：95%；
}
评论{
字号：80%；
颜色：#777777；
}
span.tags{
字号：80%；
颜色：rgb（48,99,170）；
}
#提交{
宽度：20%；
}
window.onload=init；
var favesList；
控制台日志（favesList）；
函数init（）{
//获取提交按钮句柄
var submit=document.getElementById（“提交”）；
//将单击处理程序添加到按钮以调用方法将文本添加到列表
submit.onclick=AddFavorite；
log（“返回init”）；
}
函数收藏夹（url、标题、注释、标记）{
console.log（this）；
this.url=url；
this.title=标题；
this.comment=注释；
this.tags=标签；
console.log（this）；
}
函数AddFavorite（）{
var f=新的收藏夹(
document.getElementById（“url”）.value，
document.getElementById（“title”）.value，
document.getElementById（“注释”）.value，
document.getElementById（“标记”）.value）；
控制台日志（f）；
favesList=document.getElementById（“列表”）；
控制台日志（favesList）；
var节点=document.createElement（“LI”）；
var a=document.createElement（'a'）；
a、 appendChild（document.createTextNode（f.title））；
a、 href=f.url；
控制台日志（a）；
子节点（a）；
appendChild（document.createTextNode（f.comment））；
appendChild（document.createTextNode（f.tags））；
console.log（节点）；
favesList.appendChild（节点）；
控制台日志（favesList）；
}
标记并保存您的收藏夹
添加新收藏夹：
网址：


标题：


评论：


标签：




收藏夹列表

    

    您需要
    返回false；
    作为
    AddFavorite（）
    方法中的最后一行，以阻止浏览器处理按钮和刷新页面。
    好的，现在尽量不要感觉自己太像一个无知者，这并不是我不知道的，只是我从来没有想到过它是一个解决方案。这就是全部，谢谢！