Capturing user search requests with input fields instead of prompts

Question

Hi, I'm trying to create a simple javascript program which checks whether user input matches a price in a catalog of items, similar to the "student record search challenge" in the "Javascript loops, arrays, and objects" course. I want to use input fields instead of a prompt box, so I figured i would add an eventListener to an input button, which checks whether text input matches something in the array, but I can't get the eventListener to work more than once. I figure i need a loop on the eventListener in order to get it to work multiple times, but I can't figure out how to do it. Maybe an eventListener isn't the way to go at all. Basically, my question is how to capture user search request with input fields in a javascript program, and capture it multiple times. Thanks for any input you have.

HTML:

<body>
    <h1>UP Rental Pricing Guide</h1>

    <input type= "text" id="inputText">
    <button type="button" id="submitBtn">submit</button>

    <div class="output"></div>
<script src="RentalPrices.js"></script>
</body>

Javascript:

/* Check whether submitted info matches any of the furniture listings. Return price. */

document.querySelector("#submitBtn").addEventListener ("click", function () {
    for (i = 0; i < rentalPrices.length; i+= 1) {
        if (rentalPrices[i].furniture == document.querySelector("#inputText").value.toLowerCase()) {
            document.querySelector(".output").innerHTML = rentalPrices[i].price + " " + rentalPrices[i].furniture;
            return;
        } 
    }
}) 

var rentalPrices = [
{furniture: "entrance console" , price: 75},
{furniture: "entrance bench", price: 45},
{furniture: "entrance accessories", price: 10},
{furniture: "14x11 petit art", price: 8},
{furniture: "24x24 small art", price: 10},
{furniture: "30x30 medium art", price: 20},
{furniture: "33x49 large art", price: 30},
{furniture: "extra large art", price: 40},
{furniture: "kidney pillows", price: 5},
{furniture: "18x18 pillows", price: 5},
{furniture: "22x22 pillows", price: 10},
{furniture: "office desk", price: 75},
{furniture: "office chair", price: 25},
{furniture: "office area carpet", price: 45},
{furniture: "office accessories", price: 30},
{furniture: "office leaning bookcase", price: 30},
{furniture: "occasional chair", price: 75},
{furniture: "medium sofa", price: 175},
{furniture: "large sofa", price: 200},
{furniture: "leather sofa", price: 250},
{furniture: "fabric love seat", price: 150},
{furniture: "leather love seat", price: 200},
{furniture: "chaise", price: 250},
{furniture: "sectional", price: 250},
{furniture: "slipper chair", price: 250},
{furniture: "4x6 rug", price: 35},
{furniture: "5x7 rug", price: 45},
{furniture: "8x10 rug", price: 75},
{furniture: "fancy rug", price: 100},
{furniture: "side table", price: 25},
{furniture: "coffee tables", price: 50},
{furniture: "floor lamp", price: 25},
{furniture: "table lamp", price: 10},
{furniture: "plant", price: 45},
{furniture: "console", price: 75},
{furniture: "living room accessories", price: 75},
{furniture: "small dining room table", price: 100},
{furniture: "large dining room table", price: 150},
{furniture: "medium dining room table", price: 125},
{furniture: "dining room chair", price: 25},
{furniture: "barstool", price: 30},
{furniture: "kitchen table", price: 125},
{furniture: "queen blow-up bed", price: 25},
{furniture: "queen staging headboard", price: 40},
{furniture: "queen duvet set", price: 40},
{furniture: "king duvet set", price: 50},
{furniture: "bedside table", price: 25},
{furniture: "bedskirt", price: 10},
{furniture: "throw", price: 10},
{furniture: "stool", price: 25},
{furniture: "hand towels", price: 4},
{furniture: "face towels", price: 2},
{furniture: "bath towels", price: 6},
{furniture: "dresser", price: 200},
{furniture: "patio set", price: 35},
{furniture: "bistro set", price: 35},
{furniture: "outdoor dining table", price: 40},
{furniture: "outdoor dining chair", price: 15},
{furniture: "outdoor bench", price: 45},
{furniture: "wicker chair", price: 30},
]

Answer 1 · 2018-12-01T21:32:24Z

December 1, 2018 9:32pm

On this line, you're assigning the output to be the single item that matched on that pass of the loop. If there are more than one item with the same price, it will overwrite the previous item and leave you with the last matching item in the array:

document.querySelector(".output").innerHTML = rentalPrices[i].price + " " + rentalPrices[i].furniture;

What I would recommend is clearing the .output div before the loop and using += instead of = to add the next match to the previous ones, with appropriate formatting of course.

Answer 2 · 2018-12-02T01:41:42Z

December 2, 2018 1:41am

Oh thanks, that makes sense. I added a message function and it works much better.

var message = "";

function print(message) {
    var outputDiv = document.querySelector(".output");
    outputDiv.innerHTML = message;
}

document.querySelector("#submitBtn").addEventListener ("click", function () {
    for (i = 0; i < rentalPrices.length; i+= 1) {
        if (rentalPrices[i].furniture === document.querySelector("#inputText").value.toLowerCase()) {
            message += rentalPrices[i].price;
            print(message);
            document.querySelector("#inputText").value = "";  
        }
    } 
})

Welcome to the Treehouse Community

Looking to learn something new?

Emily Bozek

Emily Bozek

Capturing user search requests with input fields instead of prompts

2 Answers

Seth Kroger

Seth Kroger

Emily Bozek

Emily Bozek