Question

这是一个学校项目而不是在一个正常运行的网站上使用的东西，所以不用担心它只是客户端！我们被要求扩展我们的最后一项任务，以创建一个脚本，允许教师在我们的“音乐商店”主页的搜索框中输入艺术家名称，然后搜索我们构建的JavaScript数组，然后返回结果在一个带有“专辑名称”的新窗口中，以及另一个页面的链接以获取更多信息（还没有那么担心该链接，试图让实际的搜索和专辑返回功能首先工作！）。

以下是我的内容，JS FIddle是：http://jsfiddle.net/2AS53/。对于什么是错误的任何帮助或想法将不胜感激。谢谢你的帮助...

<div class="form">
<form method="get" action="input">
    <input name="textfield" type="text" class="colortext" placeholder=" Search entire store..." />
</form>

搜索

< script >

var myInventory = [{
    id: 001,
    title: "Total Life Forever",
    artist: "FOALS",
    price: 14.99,
    released: "March, 2009",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 002,
    title: "Bein Love",
    artist: "Locksley",
    price: 14.99,
    released: "April, 2012",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 003,
    title: "Privileged",
    artist: "Nick Moss",
    price: 14.99,
    released: "June, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 004,
    title: "Asondeguerra",
    artist: "Juan Louis Guerra",
    price: 14.99,
    released: "September, 2013",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 017,
    title: "Way Out Here",
    artist: "Josh Thompson",
    price: 14.99,
    released: "August, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 018,
    title: "Tremolo",
    artist: "The Pines",
    price: 14.99,
    released: "January, 2007",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 019,
    title: "Live From Freedom Hall",
    artist: "Lynyrd Skynyrd",
    price: 14.99,
    released: "June, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 020,
    title: "Achin & Shakin",
    artist: "Laura Bell Bundy",
    price: 14.99,
    released: "July, 2013",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 021,
    title: "Here I Am",
    artist: "Marvin Sapp",
    price: 14.99,
    released: "November, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 022,
    title: "Just James",
    artist: "J Moss",
    price: 14.99,
    released: "March, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 013,
    title: "Tom Petty - Live",
    artist: "Tom Petty",
    price: 14.99,
    released: "May, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, ];

search.onclick = myInventory() {
    var formInput = document.getElementById("formInput").value;

    for (i = 0; i < data.length; i++) {
        if (data[i] == formInput) {
            onclick = "java script: openWin('search.html') {"Album Name:"' title};
       } else {
            onclick = "java script: openWin('search.html') ("No Artists Found");
        }
    }
}; </script>

Answer 1

你有一些拼写错误，这就是为什么我创建了一个有效的jsFiddle：http://jsfiddle.net/2AS53/3/

以下是阻碍您的代码工作的主要内容。

您不必在JSFiddle脚本框架中添加<script>标记。只有纯JavaScript才能实现。那就是为什么你在错误控制台中有Uncaught SyntaxError: Unexpected token <的原因。
在myInventory（）方法中，您指的是data变量，但是您没有这样的变量，您有变量var myInventory = [...。这是另一个错误。您定义变量，然后使用相同的名称进行操作。第二个声明将覆盖第一个声明。
JSFiddle网站将您的JS代码放在window.load事件的侦听器中，因此，您的数据和onclick事件处理程序不是在全局范围内定义，而是在window.load事件侦听器的范围内定义。这就是错误控制台中出现“未捕获的ReferenceError：myInventory未定义”错误的原因。当您在结果框中单击鼠标右键并选择“查看框架源”时，您可以看到自己正是jsfiddle生成的。
由于所有内容都在window.load事件处理程序中，为了将事件侦听器附加到搜索按钮，您应首先获取您的按钮元素（我已使用document.getElementById），然后执行
```
document.getElementById('searchBtn').onclick = function() {
}
```

或

    document.getElementById('searchBtn').addEventListener('click', function() {
    });

第二种方式更灵活，因为它允许您为单个事件拥有多个事件侦听器。我已将id="searchBtn"添加到HTML中的搜索按钮。

Answer 2

在HTML代码中使用onClick函数并尝试

使用HTML搜索，需要JavaScript才能搜索数组并在新窗口中返回结果

2 个答案: