Javascript scope, assiging values

Question

I have this "small box" in .php file but in html section:

  X: <input name="translate_x" id="translate_x" type="text" maxlength="3" value="0" onchange=""/></br>

and in other file, .js, I have :

JSC3D.Matrix3x4.prototype.translate = function(tx, ty, tz) {
    console.log("woop");

    function changex() {
        tx = parseFloat(document.getElementById('translate_x').value) + "<br>";
    }

    console.log(tx);
    this.m03 += tx;
    this.m13 += ty;
    this.m23 += tz;

};

and console gives me information that changex() function is not defined. What I want to have is, when I type number in text box, it assign value to tx, can anyone help me with this issue ?

/////////////////////////////////////
I made It working perfectly now, here is code : 
html file:
    X: <input name="translate_x" id="translate_x" type="text" maxlength="3" value="0" onchange=""/></br>
.js file:
JSC3D.Matrix3x4.prototype.translate = function(tx, ty, tz) {

var t=0;

 t = parseFloat(document.getElementById('translate_x').value);

console.log(t);

    if(t!=0)
    {

    console.log(this.m03);
    this.m03 += tx;
     tx=t;
     this.m03 += tx;
    this.m13 += ty;
    this.m23 += tz;
    }
    else
    {
    this.m03 += tx;
    this.m13 += ty;
    this.m23 += tz;
    }
};

`changex` exists within `JSC3D.Matrix3x4.prototype.translate` only. For `changex` to be callable from an on* attribute on an element, it should be globally scoped (i.e. `window.changex = function()` ... or defined in the global scope in the usual way — Jaromanda X, Sep 08 '15 at 14:27
@Jaromanda X thank you very much ! I dont know why, but now works both ways, and both ways without entering any value into "box", it changes position of the object, that is what I want, but to be controlled, so by default it should always be centre positioned, and assigning value should translate along x axis ? — commandos2389, Sep 08 '15 at 14:54

Anders · Accepted Answer · 2015-09-08T16:39:17.500

-1

You have correctly identified that this is about scope. Since the function changex is defined inside the function JSC3D.Matrix3x4.prototype.translate it only exists within that function and can only be called from there. To be able to call it from the onchange event, you have to declare it globally. That can be done by moving it out, like this:

JSC3D.Matrix3x4.prototype.translate = function(tx, ty, tz) {
console.log("woop");
console.log(tx);
this.m03 += tx;
this.m13 += ty;
this.m23 += tz;

};

function changex() {
 tx = parseFloat(document.getElementById('translate_x').value) + "<br>";
}

However, please note that there are now two variables named tx. One is a parameter to translate and it's scope is therefore that function. The other is used in changex, and unless it is declared outside of the function it's scope will be in it. Changing tx in changex will not affect tx in translate.

edited Sep 08 '15 at 16:39

answered Sep 08 '15 at 14:47

Anders

8,307
9
56
88

thank you very much. actually when I tried again, it was working, but object was not positioned in the centre of the screen as it should be because i didnt write any value inside "small box" ?? I dont know why but using this solution, do you know how I can make it work, so when I enter value it will change position of the box ? – commandos2389 Sep 08 '15 at 14:50
I added some to explain the variable scope. Not sure it helps you with your question. Im not sure I understand it and I dont know if it can be answered with the information in your question. If you cant solve it by yourself, you should ask a new question. – Anders Sep 08 '15 at 16:40
do you know how can I call this function: JSC3D.Matrix3x4.prototype.translate = function(tx, ty, tz) than I will be able to call this function instead of changex(), and then I will not have any scope problem :) – commandos2389 Sep 08 '15 at 16:59
First you need an object of the type `JSC3D.Matrix3x4`. If that object is called `obj` then you just call `obj.translate(1, 2, 3)`. But you should post a new question (with all relevant information in it) if you want to know something else. – Anders Sep 08 '15 at 17:15
thank you so much :) I did it, now it works perfectly, just have to add same thing for all axis : – commandos2389 Sep 08 '15 at 18:18
An explenation for the downvote would be appreciated. – Anders Sep 09 '15 at 09:29
If it was me, I am sorry, because I am new to stackOverflow, I really appreciate Your help. – commandos2389 Sep 09 '15 at 09:31
No problem, Mario. If the down arrow next to my answer is orange, it was you. You can just click it again to reverse the downvote, or click the up arrow to upvote instead. But probably it was someone else. No big deal anyway. Glad it helped! – Anders Sep 09 '15 at 09:34
It wasnt me, I still dont have any privlege to up/down vote. anyway thank you very much :) – commandos2389 Sep 09 '15 at 09:36

Javascript scope, assiging values

1 Answers1