Using object property when declaring it in javascript

Asked

Viewed 42 times

0

Personal I am starting in javascript and I have many questions related to objects. One of them is the following: Let’s assume that I create an object.

Here I have a list and I want to keep it inside an object and a function of this object serves to change the color of this list.

(That’s not exactly what I want to do but you can understand) 

var Objeto = { 
        //Aqui eu guardarei meu elemento.
		lista : document.getElementsByTagName('li'),
        //E esta funcao server para alterar o style das LIs.
		alt_cor : function(){
			Objeto.lista.setAttribute("style", "color:red");
				}
			}
			Objeto.alt_cor();
<ul class="lista_frutas">
  <li>Banana</li>
  <li>Laranja</li>
  <li>Maça</li>
</ul>

javascript objects

2 answers

2


You have to change, or take into account, two things in your code to make it work:

  • within that object the functions will run in the context of itself. This means that you can use this to access the Object.
  • .getElementsByTagName() gives you a list of elements. To use . setAttribute() you have to use an element, not an element list. So you have to iterate (traverse) those elements and use the .setAttribute() one by one.

var Objeto = {
  lista: document.getElementsByTagName('li'),
  alt_cor: function() {
    for (var i = 0; i < this.lista.length; i++) {
      this.lista[i].setAttribute("style", "color: red;");
    }
  }
}
Objeto.alt_cor();
<ul class="lista_frutas">
  <li>Banana</li>
  <li>Laranja</li>
  <li>Maça</li>
</ul>

  • Nice answer, but let me add something. And if I remove the for and outside the object add a setInterval() to execute this function every 1 second, and so the colors of the Lis automatically change in a certain range; as would the script?

  • @Wendelgomes Do you want to call alt_cor by changing one? or change all of them every time setInterval runs? Explain what doubt you have so you can explain better.

  • That change one by one.

  • This with the same object structure only that instead of using the for all will be changed quickly, use setInterval() to change them one by one.

  • @Wendelgomes => https://jsfiddle.net/md9txce5/ (I wrote a few more lines to make it interesting :) )

  • kkkkk Cool the scheme you created. I had done here only that the shape you made got much better. I used a function outside the object to perform the function that was inside I could not perform from inside the object. Thank you very much helped me a lot!

Show 1 more comment

1

Your code would look like below.

You create the object and decalara sseu method inside it that takes as a parameter which element you want to change.

Then outside the object you call the method and pass which object in the list you want to change color by your index.

There are a thousand ways to do this but I am giving a very simple and didactic example for you to understand how a list and declaration of methods works.

var objeto = {
	lista: document.getElementsByTagName('li'),
	alt_cor: function(elemento) {
		elemento.setAttribute("style", "color:red");
	}
};

objeto.alt_cor(objeto.lista[0]);
objeto.alt_cor(objeto.lista[1]);
objeto.alt_cor(objeto.lista[2]);
<ul class="lista_frutas">
  <li>Banana</li>
  <li>Laranja</li>
  <li>Maça</li>
</ul>

Browser other questions tagged javascript objects

You are not signed in. Login or sign up in order to post.