-5

HTML コード

<html>
<head>

<title>Price List </title>

</head>

<body>

<h1> PRICELIST </h1>
<form id="formSearch">
<div>
<label for="searchBox"> Search products here: </label>
<input type="text" placeholder="Type text here to search product" id="searchBox">
</div>
<div id="buttons">
<button id="getAll"> GET ALL PRODUCTS</button>
</div>

</form>

<div id="outputPlace">

</div>


<script src="product.js"></script>
</body>


</html>

JavaScript コード

(function(){                    //start anonymous function

var list= {

  "listOfProducts": [

  {
  "name":"hard disk",
  "price": "50$",
  "quality":"good",
  },
  {
  "name":"monitor",
  "price":"100$",
  "quality": "very good",
  },
  {
  "name":"speakers",
  "price":"20$",
  "quality": "not bad",
  },
  {
  "name":"headphones",
  "price":"12$",
  "quality":"bad",
  },
  {
  "name": "mobile phone",
  "price": "300$",
  "quality": "excellent",
  },
  {
  "name": "usb memory",
  "price": "30$",
  "quality": "the best",
  }
  ]
},

 target=document.getElementById("outputPlace"),
    searchForm=document.getElementById("formSearch"),
    productList=list.listOfProducts,
    listLength=productList.length,
    searchValue=document.getElementById("searchBox"),
    searchInput=searchValue.value;




var listMethods = {

searchList: function(event) {

event.preventDefault();
var i;
target.innerHTML="";
if(listLength>0 && searchInput!=="") {

   for(i=0;i<listLength;i++) {
   var product=productList[i],
       whatIsFound=product.name.indexOf(searchInput);
       if(whatIsFound!==-1){

       target.innerHTML+='<p>'+product.name+', '+product.price+', '+product.quality+'<a href="http//www.facebook.com">click here to buy</a></p>'
       }

   }


}





}





};

searchForm.addEventListener("submit",listMethods.searchList,false);








}) (); //end anonymous function

私のコードを手伝ってくれる人が必要です。なぜうまくいかないのかわかりません。シンプルな検索ボックスです。ボタンは気にしないでください。コードでわかるように、Enter キーを押すとコードが実行されるはずです。私は初心者で、自分の間違いを見つけるために数時間努力しています。

4

2 に答える 2

2 
searchInput=searchValue.value;

それへのポインターを作成する代わりに、実行時にの.valueプロパティを取得します。<input>変数searchInputには空の文字列が含まれるだけで、それは変更されません。

その割り当てをイベント ハンドラーに移動して、ボタンがクリックされたときに値を取得すると、機能します。

( jsfiddle.net で動作するデモ、@KevinBowersoxが言及した構文エラーも修正)

于 2013-07-25T00:44:29.890 に答える
0

このオブジェクト リテラルはIE、プロパティ リストの末尾に余分なコンマがあると、飛び込みません。

var list= {

  "listOfProducts": [

  {
  "name":"hard disk",
  "price": "50$",
  "quality":"good", <-- remove these since there is no property after
  },
  {
  "name":"monitor",
  "price":"100$",
  "quality": "very good", <-- remove these since there is no property after
  },
  //rest of object omitted, still needs changed...
}; <-- end with semicolon

また、無名関数 (自己実行だと思いますか?) が適切に閉じられていません。

(function(){
  //code goes in here

})(); <--- This piece is missing;

Aptana などの優れた Javascript エディターを入手することをお勧めします。これらの単純な構文エラーは、非常に迅速に特定されます。

于 2013-07-25T00:34:31.207 に答える