unable to set the innerHTML of an element

Question

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>

As an aside: it is unwise to set the innerHTML of elements if you can avoid it. It's much better to create elements and appendChild them places. (Similarly, it's better to remove an element's children than to set its innerHTML to nothing.) — podperson, Mar 03 '17 at 21:22
@podperson Well browsers are really good at parsing HTML. So why not use innerHTML? — Fabian Klötzl, Mar 03 '17 at 21:24
Possible duplicate of [Uncaught TypeError: Cannot set property 'value' of null](http://stackoverflow.com/questions/16100543/uncaught-typeerror-cannot-set-property-value-of-null) — Heretic Monkey, Mar 03 '17 at 21:26
@FabianKlötzl — it's not a performance issue so much as a security issue. It's also not great performance-wise if you are repeatedly getting the browser to parse out HTML when you could be cloning elements. — podperson, Mar 03 '17 at 21:30

score 3 · Answer 1 · answered Mar 03 '17 at 21:20

3

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

answered Mar 03 '17 at 21:20

Fabian Klötzl

407
3
10

I should note that the error persists even when the div has an ID of `searchPane` – Wolfish Mar 03 '17 at 21:27
2

@Wolfish Did you ensure that the code runs *after* the DOM is generated? – Fabian Klötzl Mar 03 '17 at 21:29
Nice catch! Any ideas on the second issue? – Wolfish Mar 03 '17 at 21:32

score 1 · Answer 2 · answered Mar 03 '17 at 21:55

1

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.

answered Mar 03 '17 at 21:55

Omri Luzon

3,975
6
20
29

Excellent stuff, thanks! I'm going to let the community decide which is the most appropriate answer because both you and Fabian have provided correct answers to my problems. – Wolfish Mar 03 '17 at 22:24

unable to set the innerHTML of an element

2 Answers2