我是Javascript和这个网站的新手，所以如果这看起来像新手我很抱歉。 这是所有客户端，没有基于服务器的东西。它适用于我的Javascript课程。
我的老师让我们在音乐商店工作，为了完成这项任务，我需要这样做，当我按下搜索按钮时，它会将搜索框中的艺术家和相册等结果显示在一个名为searchresults.html的页面中。单击搜索按钮时，我需要获取文本框的值，该文本框假设存储在cookie / html 5存储中。然后我拿走那个cookie，并搜索我的音乐数据库以寻找匹配。我似乎无法弄清楚为什么这段代码不起作用。
任何帮助都将不胜感激。
HTML（index.html）
<a target="" href="searchresults.html">
<img src="img/04.png" id="searchButton" alt="img" onclick="createCookie();"> </a>
</div></div>
<div class="form">
<form method="post" action="" >
<input type="text" id="searchBox">
</form>
</div>
</div>
<script>
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
};
</script>
JS（store.js）
var Database = [];
var thriller = {
id: "thriller_MJ",
title: 'Thriller',
artist: 'Michael Jackson',
price: '$12.99',
releaseDate: new Date(1982, 10, 30),
Quantity: 35,
link: "albums/thriller.png",
Tracklinglist: ["Wanna Be Startin Somethin", "Baby Be Mine", "The Girl Is Mine", "Thriller", "Beat It", "Billie Jean", "Human Nature", "P.Y.T. (Pretty Young Thing)", "The Lady In My Life"]
};
var asDaylightDies = {
id: "asDaylightDies_KSE",
title: 'As Daylight Dies',
artist: 'Killswitch Engage',
price: '$9.99',
releaseDate: new Date(2006, 11, 21),
Quantity: 20,
link: "albums/asDaylightDies.png",
Tracklinglist: ["Daylight Dies", "This Is Absolution", "The Arms of Sorrow", "Unbroken", "My Curse", "For You", "Still Beats Your Name", "Eye of the Storm", "Break The Silence"]
};
var thriller2 = {
id: 'thriller_MJ_2',
title: 'Thriller 2',
artist: 'Michael Jackson ',
price: '$12.99',
releaseDate: new Date(1982, 10, 30),
quantity: 35,
link: "albums/thriller.png",
Trackinglist: ["Wanna Be Startin Somethin", "Baby Be Mine", "The Girl Is Mine", "Thriller", "Beat It", "Billie Jean", "Human Nature", "P.Y.T. (Pretty Young Thing)", "The Lady in My Life"]
};
var ledzeppelin = {
id: "ledzeppelin_LZ",
title: 'Led Zeppelin',
artist: 'Led Zeppelin',
price: '$14.99',
releaseDate: new Date(1969, 01, 12),
Quantity: 40,
link: "albums/ledzeppelin.png",
Tracklinglist: ["Good Times Bad Times", "Babe I'm Gonna Leave You", "You Shook Me", "Dazed And Confused", "Your Time Is Gonna Come", "Black Mountain Side", "Communication Breakdown", "I Can't Quit You Baby", "How Many More Times"]
};
var asDaylightDies2 = {
id: "asDaylightDies_KSE_2",
title: 'As Daylight Dies ',
artist: 'Killswitch Engage 2',
price: '$9.99',
releaseDate: new Date(2006, 11, 21),
Quantity: 20,
link: "albums/asDaylightDies.png",
Tracklinglist: ["Daylight Dies", "This Is Absolution", "The Arms of Sorrow", "Unbroken", "My Curse", "For You", "Still Beats Your Name", "Eye of the Storm", "Break The Silence"]
};
var darkSideOfTheMoon = {
id: "darkSideOfTheMoon_PF",
title: 'Dark Side of the Moon',
artist: 'Pink Floyd',
price: '$7.99',
releaseDate: new Date(1973, 02, 01),
Quantity: 60,
link: "albums/darkSideOfTheMoon.png",
Trackinglist: ["Speak to Me", "Breathe", "On the Run", "Time", "The Great Gig in the Sky", "Money", "Us and Them", "Any Colour You Like", "Brian Damage", "Eclipse"]
};
Database.push(thriller, asDaylightDies, ledzeppelin, darkSideOfTheMoon, thriller2, asDaylightDies2);
function displayAlbum() {
for (var i = 0; i < Database.length; i++) {
alert(Database[i].title + " , " + Database[i].link);
}
};
//function init() {
//"use strict";
//document.getElementById('searchButton').addEventListener('click', //search);
// searchBox.onsubmit = search;
//};
JS（searchresults.js）
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
};
function deleteCookie(name) {
'use strict';
document.cookie = encodeURIComponent(name) +
'=;expire=Thu, 01-Jan-1970 00:00:01 GMT';
};
function init() {
'use strict';
document.getElementById('searchButton').addEventListener('click', function(){
getCookie();
search();
});
}
window.onload = init();
app.js
function search() {
'use strict';
document.getElementById('searchBox').value;
for (var i = 0; i < Database.length; i++) {
if (searchBox.value === Database[i].artist) {
return Database[i].artist, Database[i].album;
}
}
}
答案 0 :(得分：0)
您应该将init函数合并到加载文件中，例如：
function init() {
document.getElementById('searchButton').addEventListener('click', function(){
getCookie();
search(); // I don't see this function
});
}
window.onload = init();也应该只调用一次。在你的情况下，它看起来像是在覆盖它们，具体取决于首先加载哪一个。
为了太多全局，可能会将关于cookie的所有内容放在一个单独的库中：
// mycookies.js
window.MyCookies = {
createCookie: function(name, value, days){/*c/p code in here*/},
getCookie: function(c_name){/**/},
deleteCookie(name){/**/}
};
您的数据库相同：
// database.js
window.DataBase = {
thriller: {/**/},
thriller2: {/**/},
asDaylightDies: {/**/},
asDaylightDies2: {/**/},
darkSideOfTheMoon: {/**/}
};
然后考虑上面的，你的“工具”可以这么说。例如你的逻辑：
// searchalbum.js
(function(db, cookies){
'strict';
window.SearchAlbum = {
init: function(){
this.cacheItems();
if (this.container.length){
this.bindEvents();
this.lastSearch('album');
}
},
cacheItems: function(){
// Make sure the click event bubbles down to the img.
// If not, put the id on the anchor tag
// If you have many search items on the page, change to .getElementsByClassName
this.container = document.getElementById('searchButton');
},
bindEvents: function(){
var self = this;
this.container.addEventListener('click', function(){
self.search();
cookies.createCookie('album', this.src || this.alt);
});
},
search: function(){
for (var item in db){
if (db.hasOwnProperty(item)){
alert(item.title + " , " + item.link);
}
}
},
lastSearch: function(name){
var cookie = cookies.getCookie(name);
if (cookie){
alert('last search: ' + cookie);
}
}
};
window.onload = SearchAlbum.init;
}(window.DataBase || {}, window.MyCookies || {}));