How to use parameter variable from function through function body scope?

Question

How to use parameter variable "id" from "BubbleGum.prototype.ToolBar = function(id)" through a function "checkmousepos(e,id)" body scope ?.

I've tried to use inline method onClick , traditional method element.onClick = dosomething(); and W3C Standard and microsoft method element.addEventListener with same problem happening which is variable id = undefined.

Can someone please for the love of universe vibrations provide me with a concise and simplistic answer not some tricky hack semi-trash.

BubbleGum.prototype.ToolBar = function(id) {

var TB = document.getElementById(id);

TB.style.position = "relative";
TB.style.marginLeft = (RootFrame.style.marginLeft);
TB.style.marginTop = "-22.0em";
TB.style.left = "0em";
TB.style.top = 0;
TB.style.height = "2em";
TB.style.width = (RootFrame.style.width);
TB.style.color = "black";
TB.style.backgroundColor = "#6a071a";
TB.style.borderTopLeftRadius = "0.4em";
TB.style.borderTopRightRadius = "0.4em";
TB.style.textAlign = "center";

TB.onclick = checkmousepos(id);


function checkmousepos(e, id) {
    document.write(id);

    //var TB = document.getElementById(id);

    var mousex = e.pageX;
    var mousey = e.pageY;

    id.style.marginLeft = mousex + "px";


    //TB.addEventListener("mousemove",dick,false);
    //document.write("jello");
  };
};

Why is this a prototyped property, it seems like just your run of the mill DOM modifications ? — adeneo, Apr 23 '15 at 14:50
`checkmousepos(e,id)` expects 2nd argument to be `id`. But in your call you are passing one arg. So `id` will be undefined — Sandeep Nayak, Apr 23 '15 at 14:50
" I'm programming a graphical user interface for my own personal uses and this has nothing to do with the question I asked. adeneo " How do I give event to checkmousepos in the prototype scope ? Sandeep Nayak — Dominic Hughes, Apr 23 '15 at 14:51
It does because it's seems complicated, but really it's a basic mistake, you're calling the function, not referencing it, it should be `TB.onclick = checkmousepos;` and you can't magically pass an ID as an argument like that. — adeneo, Apr 23 '15 at 14:53
Um... why not it's clearly visible and detectable somehow, just don't know where the value is from my point of view?. adeneo — Dominic Hughes, Apr 23 '15 at 14:56
A prototyped method is generally a method that you want to share across multiple instances of a class. There's nothing in the prototyped `ToolBar` method to suggest any such behaviour, it's just basic DOM traversal and adding a few styles, so one wonders why it's prototyped to begin with ? — adeneo, Apr 23 '15 at 15:00
adeneo that does not do what I asked for urgh.. -___- Samuel Edwin Ward it's clearly written in the title!. — Dominic Hughes, Apr 23 '15 at 15:07

score 1 · Accepted Answer · answered Apr 23 '15 at 15:06

1

this points to element that has onclick attached. Passing this you have access to that element in the elper method checkmousepos

TB already points to selected element – why you don't use it?

function BubbleGum() {}

BubbleGum.prototype.ToolBar = function(id) {

    var TB = document.getElementById(id);
    
    TB.style.color = "green";
    TB.onclick = function(e) {
        checkmousepos(e, this)
    }
    
    
    function checkmousepos(e, id) {
        console.log('arg', arguments)
        var mousex = e.pageX;
        var mousey = e.pageY;
    
        id.style.marginLeft = mousex + "px";
    };
}
    
var s = new BubbleGum().ToolBar('toolbar');

<div id="toolbar">
    some content
</div>

answered Apr 23 '15 at 15:06

Krzysztof Safjanowski

7,292
3
35
47

Your a crazy genius where did you find this information , what source did you use ? Krzysztof Safjanowski Please provide a reliable source. – Dominic Hughes Apr 23 '15 at 15:12
1

That artilce will be good for start: http://www.sitepoint.com/javascript-this-event-handlers/ than this: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick and little more knowladge from there: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – Krzysztof Safjanowski Apr 23 '15 at 15:21
I still have one issue I wanna move the rootframe instead of the toolbar how would I go about that? HERE IS MY CODE = https://jsfiddle.net/7reojzf9/ Krzysztof Safjanowski – Dominic Hughes Apr 23 '15 at 15:24
@DominicHughes How and where you are calling `RootFrame` method? Some HTML will be also helpfull – Krzysztof Safjanowski Apr 23 '15 at 15:27
updated the fiddler oh.. through the body of the execute function. https://jsfiddle.net/7reojzf9/2/ Krzysztof Safjanowski – Dominic Hughes Apr 23 '15 at 15:30
@DominicHughes root container should not contain other elements? – Krzysztof Safjanowski Apr 23 '15 at 15:35

score 0 · Answer 2 · answered Apr 23 '15 at 14:54

You have to assign the callback as onclick handler, while in your code you calling the checkmousepose function and assigning the return value which is undefined as nothing is returned.

So you have to return a function which will be assigned as a onclick handler like this

function checkmousepos(id) {
    return function(e){
        document.write(id);

        //var TB = document.getElementById(id);

        var mousex = e.pageX;
        var mousey = e.pageY;

        id.style.marginLeft = mousex + "px";


        //TB.addEventListener("mousemove",dick,false);
        //document.write("jello");
    }
};

This returns undefined and seems like that would make it more complicated then needed — Dominic Hughes, Apr 23 '15 at 15:03

score 0 · Answer 3 · answered Apr 23 '15 at 16:01

0

id is already in BubbleGum.prototype.ToolBar closure context, so it is availble checkmousepos function, just use it.

answered Apr 23 '15 at 16:01

gravatasufoca

37
1
8

How to use parameter variable from function through function body scope?

3 Answers3