JavaScript代碼不起作用

-5

<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鍵時應執行代碼，如代碼中所示。我是一個begginer，我正在嘗試幾個小時來找到我的錯誤。

來源

2013-07-25 Nikola Lošić

需要一個小提琴，以及你希望它做的，它是做什麼什麼的解釋。 –

歡迎來到Stack Overflow！檢查[堆棧溢出問題清單]（http://meta.stackexchange.com/questions/156810/stack-overflow-question-checklist）作爲您缺少一些關鍵信息，以幫助我們解決您的問題。 –

請不要連續發佈兩次相同的問題。 http://stackoverflow.com/questions/17844543/cant-find-error-in-my-code編輯原文。 – rlemon

searchInput=searchValue.value;

這將讓，而不是創建一個指向它時，執行它<input>的.value財產。變量searchInput將只包含空字符串，並且不會更改。

將該賦值移動到事件處理函數中，以便在單擊該按鈕時檢索該值，並且它將起作用。

（working demo at jsfiddle.net，還修復@KevinBowersox提到的語法錯誤）

來源

2013-07-25 00:44:29 Bergi

此對象文字不會在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;

我會推薦一個好的Javascript編輯器，如Aptana。這些簡單的語法錯誤很快就會被識別出來。

來源

2013-07-25 00:34:31

不，他不應該用分號結束對象字面值;這是一個多變量聲明。而且「*這片遺漏*」在他的代碼中是正確的：'}）（）; //結束匿名函數「（不是我倒下了，其餘答案非常有效！） – Bergi

JavaScript代碼不起作用

回答

相關問題