完全披露,这是我正在参加的高级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()
方法的最后一行,以阻止浏览器处理按钮并刷新页面。