Как правильно применить функцию к элементу?

Question

[Valerii Pushkar]

Как правильно применить функцию к элементу.
Так выдает ошибку - "elem.colorAdd is not a function"
Подскажите, что тут не так

<p id="element">Hello! world!</p>
<script>
colorAdd = function(){  
  this.setAttribute("style", "color:red; border: 1px solid blue;")
}
var elem = document.getElementById("element")
elem.colorAdd();
</script>

Comments

[AlexaZem]

А как ваш colorAdd стал методом объекта elem?
Да и ради таких вещей нет смысла прототипы дергать.
Лучше скажите что вы хотите реализовать.

Answer 1

[Stimulate]

https://jsfiddle.net/vfgc39a4/1/

Comments

[Valerii Pushkar]

Спасибо, хороший вариант

Answer 2

[Сергей Соколов]

У элемента нет метода .colorAdd(), чтобы вызывать так, как вы написали. Вместо
elem.colorAdd();
можно сделать
colorAdd.apply(elem);

Это вызовет функцию colorAdd(), назначив её контекстом (значением this) переданный первым параметром elem и всё сработает так, как вы задумали. Фиддл.

Comments

[Valerii Pushkar]

Спасибо за пояснение!

Answer 3

[amf1k]

Можно через прототипы

Element.prototype.colorAdd = function(){
	this.setAttribute("style", "color:red; border: 1px solid blue;")
}
var elem = document.getElementById("element");
elem.colorAdd();

Comments

[amf1k]

https://jsfiddle.net/jn5a3zst/

[Valerii Pushkar]

Спасибо! Это то что нужно