页面未使用本地存储更新

时间:2019-11-13 18:19:25

标签: javascript arrays object local-storage

我正在使用本地存储更新页面,但是页面会刷新,并且不会随着函数调用的更改而更新。但是,当我使用控制台手动添加此代码时,页面会更新。我认为在访问本地存储之前无法完全接收本地存储可能是个问题,但我不确定。

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>

0 个答案:

没有答案