неспособные изменить цвета тега

Question

у меня есть этот код

<a href="" id="mainLink">Click Me</a> 
<a href="" id="mainLink2">Click Me 2</a> 

И тогда Js

var mainLinker = document.getElementsByTagName('a'); 
    for (var i = 0; i < mainLinker.length; i++) { 
     this.style.color = 'red'; 
    } 

Но я получаю эту ошибку

Cannot set property 'color' of undefined 

Пожалуйста, скажите мне, где это я делать неправильно.

Answer 1

this не то, что вы хотите.

Изменить тело цикла для

mainLinker[i].style.color = 'red'; 

или равноценно использовать forEach (отредактирован @ комментарий Вохуман в):

[].forEach.call(document.getElementsByTagName('a'), function(el) { 
    el.style.color = 'red'; 
}); 

Answer 2

Вы ссылаетесь this в объекте

Ваша функция не в объекте

Это будет работать

var mainLinker = document.getElementsByTagName('a'); 
    for (var i = 0; i < mainLinker.length; i++) { 
     mainLinker[i].style.color = 'red'; 
    } 

Answer 3

Конечно ваша основная проблема с использованием this, как указано в других ответах. Но почему вы делаете это вместо того, чтобы использовать правило CSS, такие как

a { color: red; } 

Если вы хотите сделать это условное так или иначе, а затем добавить класс на более высоком уровне, например, body, чтобы контролировать его:

body.make-links-red a { color: red } 

Затем, когда вы хотите сделать ссылки красный, сделать

document.body.classList.add('make-links-red')