CODEWITHSUNDEEP
javascript
Wolfish
Wolfish

Reputation: 970

unable to set the innerHTML of an element

I've built a search function to find results. However, it has two issues. The first issue is that the variable resShow doesn't seem to persist. No matter what properties it seems to have, when I use getElementById it always seems to "forget" its value:

The second issue is that iterating through my array of results seems to create an "undefined" result. That results in a string that begins with "undefined" before the expected result, as shown here:

Here is the source:

function getQueryVariable(variable){
var query = window.location.search.substring(1);
var fixed = query.substring(query.indexOf("=")+1);
return fixed;
}

var searchvariable = getQueryVariable("terms");

var options = {
id: "displ",
shouldSort: true,
tokenize: true,
findAllMatches: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [
  "tags"
]
};
var fuse = new Fuse(list, options); // "list" is the item array
var result = fuse.search(searchvariable);
var resLength = result.length;
var resShow;
for (var i=0; i<resLength; i++) {
    resShow += result[i] + "\n";
}

document.getElementById("searchPane").innerHTML = resShow;

And the HTML where it needs to display:

<div class="firstblock row bottom40">
    <div class="col-md-6 top10">
        <div>
            <img src="images/site.png" width="500" height="" style="padding-bottom: 10px" alt="" />
        </div>

    </div>

    <div class="col-md-6 top100">
        <div id="searchPane">    <==========  search results go here
        </div>
    </div>
</div>

Upvotes: 0

Views: 1156

Answers (2)

Omri Luzon
Omri Luzon

Reputation: 4224

As for your second problem, you should intialize your resShow variable to an empty string :

var resShow = "";

That way it doesn't have an undefined value at the start of your for loop, and force a string conversion on the undefined value.

Upvotes: 1

Fabian Kl&#246;tzl
Fabian Kl&#246;tzl

Reputation: 417

Your div has the class searchPane but you are looking for an element with that ID hence the name getElementById.

Upvotes: 3

Related Questions