getElementsByTagName - 两个不同标签的目标对 - 无法进行循环工作

Question

我有成对的h2和div（每对之间有另一个标记），我想要定位，以便在点击h2时更改div（不引人注目且未使用任何ids或classes来查找代码）。我已经让这个工作了一对，我现在要做的就是放入一个for循环来迭代你认为应该很容易的所有对，但是我无法让它发挥作用！

第一对的工作脚本：

var list = document.getElementsByTagName('h2');

var i = 0;

list[i].onclick = function() {
    toggleNews(i); 
}

function toggleNews(index) {
    var news = document.getElementsByTagName('div')[index]  
    if ( news.className.match(/(?:^|\s)hometext-show(?!\S)/) )
    news.className = "hometext";
    else
    news.className += " hometext-show";
}

基本上，我只需要将var i = 0;替换为for (var i = 0; i < list.length; i++) - 或者我认为 - 但是我放置{和}它不会起作用（点击时没有任何反应。

我不想使用jquery。

---

更新：非常感谢您指出我正确的方向，因为我不知道该搜索什么。

下面是一个完整的脚本（现在我只需要了解为什么你必须这样做）：

var list = document.getElementsByTagName('h2');

for (var i=0; i<list.length; i++) {
    list[i].onclick = createfunc(i);
}

function createfunc(i) {
    return function() {
        toggleNews(i); 
    }
}

function toggleNews(index) {
    var news = document.getElementsByTagName('div')[index]
    if ( news.className.match(/(?:^|\s)hometext-show(?!\S)/) )
    news.className = "hometext";
    else
    news.className += " hometext-show";
}