How to apply a function to multiple objects? (Pure Javascript)

Asked

Viewed 229 times

4

For example, I have a div within a variable obj

 obj = document.getElementById("objeto");

..I want a function to be applied to it that way

 window.onload = function(){
    window.onclick = function (){
       obj = document.getElemntById("obj");
       obj.ver();
    }
    function ver(){
       this.style.backgroundColor = "#333333";
    }
 }  

How could I make this application work?

My complete code, abixo:

    <script>        
    HTMLElement.prototype.mover = function(){

        movendo = false;
        valor = 0;
        calc = 0;
        resto = 0;
        this.onmousedown = function(e){                
            movendo = true;
            valor = e.pageX + document.body.scrollLeft;     
            calc = valor - this.offsetLeft;
            resto = this.offsetWidth - calc;

            valor2 = e.pageY + document.body.scrollTop;     
            calc2 = valor2 - this.offsetTop;
            resto2 = this.offsetHeight - calc2;

            this.style.cursor = "move";

        };            
        window.onmouseup = function(){

            movendo = false;
            this.style.cursor = "pointer";        
        };

       window.onmousemove = function(e){
            if( movendo == true ) {

                this.style.left = (e.pageX + document.body.scrollLeft) - this.offsetWidth + resto + "px";
                this.style.top = (e.pageY + document.body.scrollTop) - this.offsetHeight + resto2 + "px";

            }
        };
    }

    window.onload = function(){            
        obj = document.getElementById("obj");
        obj.mover();            
    }         
    </script>
  • This site explains how to do a lot of things without using jQuery. You might find it useful: http://youmightnotneedjquery.com/

  • Andrey, thank you, yes will help me!

  • @Samirbraga, I left a comment below, here’s a jsFiddle version too: http://jsfiddle.net/M238g/

1 answer

5


To do this you have to extend the prototype and add this method to the elements.

Example: http://jsfiddle.net/xYfMa/

HTMLElement.prototype.ver = function() {
    this.style.backgroundColor = "#333333";
}

window.onload = function () {
    window.onclick = function () {
        obj = document.getElementById("obj");
        obj.ver();
    }
}

Using the word prototype access to the prototype of all elements and this method is available in all elements. Just be careful not to write over existing methods, because this tool is very powerful.

  • It works, but not in my file, I’ll edit the answer, and I’ll put the full code, you could help me?

  • @Samirbraga, make a demo of the problem in jsfiddle and put here that I take a look.

  • You are here http://codepen.io/SamirChaves/pen/gFwpc

  • Example working without prototype http://codepen.io/SamirChaves/pen/KHpyi

  • 2

    great example of prototype. + 1

  • @Samirbraga, functions that do not use prototype cannot use the this in the same way as with prototype. But you can use it like this var este = e.target as I did in this example: http://codepen.io/sergiocrisostomo/pen/JkGrA

  • Thank you, you helped me so much!!

Show 2 more comments

Browser other questions tagged

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