javascript - 无法设置元素的innerHTML

Question

我构建了一个搜索功能来查找结果。然而，它有两个问题。第一个问题是变量 resShow 似乎没有持续存在。无论它看起来有什么属性，当我使用 getElementById 时，它似乎总是“忘记”它的值:

第二个问题是迭代我的结果数组似乎会创建一个“未定义”的结果。这会产生一个在预期结果之前以“undefined”开头的字符串，如下所示:

来源如下:

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;

以及需要显示的 HTML:

<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>

Answer 1

您的 div 具有 class searchPane，但您正在查找具有该 ID 的元素，因此名称为 getElementById >.