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

Question

This is a SCHOOL PROJECT and not something being used on a functioning website, so no worries that it's client side only! We've been asked to expand upon our last assignment to create a script that would allow out teacher to input an ARTIST name in the search box on our "music store" homepage, which would then search the JavaScript array that we built and then return the results in a new window with the "Album Name", as well as a link to another page for additional information (not so much worried about that link just yet, trying to get the actual search & album return functionality working first!).

Below is what I have, and the JS FIddle is: http://jsfiddle.net/2AS53/. Any assistance or ideas on what's wrong would be greatly appreciated. Thanks for your help...

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

Search

< 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

You had some typos, that's why I've created a working jsFiddle: http://jsfiddle.net/2AS53/3/

And here are main things, which prevent your code from working.

1. You don't have to add <script> tags in the JSFiddle script frame. Only pure JavaScript goes there. That;s why you have Uncaught SyntaxError: Unexpected token < in error console.

2. In myInventory() method you're referring to data variable, but you don't have such variable, you have variable var myInventory = [.... And this is another error. You define variable and then function with the same name. Second declaration will override first one.

3. JSFiddle web site places your JS code inside listener for window.load event, so, your data and onclick event handler are not defined in a global scope but in scope of window.load event listener. That's why there is a 'Uncaught ReferenceError: myInventory is not defined' error in error console. You can see yourself whan exactly jsfiddle produces, when right click in a result frame and choose 'View frame source'.

4. Since everything is inside window.load event handler, in order to attach event listener to search button, you should first get your button element (I've used document.getElementById) and then either do

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

or

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

Second way is more flexible, since it allows you to have multiple event listeners for a single event. I've added id="searchBtn" to search button in HTML.

Answer 2

use onClick function in your HTML code and try