我正在使用本地存储更新页面,但是页面会刷新,并且不会随着函数调用的更改而更新。但是,当我使用控制台手动添加此代码时,页面会更新。我认为在访问本地存储之前无法完全接收本地存储可能是个问题,但我不确定。
JavaScript:
<script>
function searchHouse() {
console.log("hit");
var element = "";
var list = document.getElementById('listOfHouses');
var houses = JSON.parse(localStorage.getItem('HouseList'));
var houseArray = houses.filter(function (house) {
//var dropdown = document.getElementById('dropdown');
var price = document.getElementById('selectPrice').value;
var squareft = document.getElementById('selectSquareft').value;
var bedroomsNumber = document.getElementById('selectBedrooms').value;
var bathroomsNumber = document.getElementById('selectBathrooms').value;
return house.Price < price && house.Squareft > squareft && house.BedroomsNumber == bedroomsNumber && house.BathroomsNumber == bathroomsNumber;
});
console.log(houseArray);
for (var i = 0; i < Object.keys(houseArray).length; i++) {
element += "<li>";
element += "<label>Price : " + houseArray[i].Price + "</label>";
element += "<br />";
element += "<label>Square ft : " + houseArray[i].Squareft + "</label>";
element += "<br />";
element += "<label>Number of Bedrooms : " + houseArray[i].BedroomsNumber + "</label>";
element += "<br />";
element += "<label>Number of Bedrooms : " + houseArray[i].BathroomsNumber + "</label>";
element += "<br />";
}
list.innerHTML = element;
</script>
HTML:
<form id="form1" runat="server">
<div>
<div class="container" align="center">
Select Type of House
<br />
<select id="dropdown" required>
<option value="">Select House</option>
<option value="singlefamilyhome">Single Family Home</option>
<option value="townhouse">Town House</option>
<option value="condo">Condo</option>
<option value="rental">Rental</option>
</select> <br /> <br />
</div>
<div class="container" align="center">
Select price range of House
<br />
<select id="selectPrice" required>
<option value="">Select Price</option>
<option value="price1">$100,000 </option>
<option value="price2">$99,000</option>
<option value="price3">$95,000</option>
</select> <br /> <br />
</div>
<div class="container" align="center">
Select Square Footage
<br />
<select id="selectSquareft" required>
<option value="">Select Square footage</option>
<option value="size1">2500 sqft</option>
<option value="size2">2530 sqft</option>
<option value="size3">2550 sqft</option>
</select> <br /> <br />
</div>
<div class="container" align="center">
Select Number of Bedrooms:
<br />
<select id="selectBedrooms" required>
<option value="">Select Bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> <br /> <br />
</div>
<div class="container" align="center">
Select Number of Bathrooms:
<br />
<select id="selectBathrooms" required>
<option value="">Select Bathroom</option>
<option value="1">1</option>
<option value="2">2</option>
</select> <br /> <br />
</div>
<button onclick="searchHouse()">Submit</button>
</div>
</form>
<div id="listOfHouses" onclick="searchHouse()"></div>