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

Using an HTML search, need JavaScript to search an array and return results in new window

本文关键字：搜索 窗口 结果 返回 新窗口 需要 HTML JavaScript 使用 数组      更新时间：2023-09-26

这是一个学校项目，不是在一个正常运行的网站上使用的东西，所以不用担心它只是客户端！我们被要求在上一次作业的基础上进行扩展，创建一个脚本，允许我们的老师在"音乐商店"主页的搜索框中输入艺术家的名字，然后搜索我们创建的JavaScript数组，然后在一个新窗口中返回结果，并显示"专辑名称"，以及一个指向另一个页面的链接，以获取更多信息（现在还不太担心该链接，尝试首先实现实际的搜索和相册返回功能！）。

以下是我所拥有的，JS文件夹是：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>

您有一些打字错误，这就是为什么我创建了一个可工作的jsFiddle：http://jsfiddle.net/2AS53/3/

以下是阻碍代码工作的主要因素。

  1. 您不必在JSFiddle脚本框架中添加<script>标记。只有纯JavaScript才会出现。那个这就是为什么在错误控制台中有Uncaught SyntaxError: Unexpected token <。

  2. 在myInventory（）方法中，您引用的是data变量，但您没有这样的变量，您有变量var myInventory = [...。这又是一个错误。定义变量，然后使用相同的名称定义函数。第二个声明将覆盖第一个声明。

  3. JSFiddle网站将您的JS代码放置在window.load事件的侦听器中，因此，您的数据和onclick事件处理程序不是在全局范围内定义的，而是在window.load事件侦听器的范围内定义。这就是为什么在错误控制台中出现"未捕获引用错误：myInventory未定义"错误的原因。当右键单击结果帧并选择"查看帧源"时，您可以看到jsfiddle到底产生了什么。

  4. 由于所有内容都在window.load事件处理程序中，为了将事件侦听器附加到搜索按钮，您应该首先获得按钮元素（我使用过document.getElementById），然后执行

    document.getElementById('searchBtn').onclick = function() {
}

或

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

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

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

相关文章：