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代码不起作用

回答

相关问题