0

Hey I'm a pretty big noob at javascript, please have some patience with my bad explanation . I tried googling the issue but from my understanding their solution won't work for my situation. I'm trying to condense my code and to do that I need to set the variable x in function start(); to 1 2 or 3 (depending on what button I would click)

I can't get the information in the function start() like most people would because I only want it to take a value from ONE of the 3 possible functions, and the way around that is to set the variable in function start() by setting it from function starthigh/mid/low().

Is there a global variable / return / something else I don't understand or know about that could fix this? :) (the code is very barebone so it's easier for you guys to help me because I know all the other code is irrelevant)

function starthigh() {
  var x = 3;
}

function startmid() {
  var x = 2;
}

function startlow() {
  var x = 1;
}

function start() {
  alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}
<button onclick="startlow(); start();">1x Bet</button>
<button onclick="startmid(); start();">2x Bet</button>
<button onclick="starthigh(); start();">3x Bet</button>
Mr Nielsen
  • 11
  • 4
  • how about like this: `button onclick="start(1);">1x Bet` and `function start(x) { alert(x) }` - then you can cut out the middle man – ADyson Nov 07 '18 at 13:19

2 Answers2

4

The x variables in your eample are local to the functions in which they're declared. Once the function returns, the variable isn't present anymore.

To change that without changing your code in other ways, you'd have to make x a global instead:

var x; // Global

function starthigh() {
    x = 3;
}

function startmid() {
    x = 2;
}

function startlow() {
    x = 1;
}

function start() {
    alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
}

Global variables are best avoided, however, perhaps by using modern event handling:

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function starthigh() {
        x = 3;
    }
    function startmid() {
        x = 2;
    }
    function startlow() {
        x = 1;
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", function() {
        starthigh();
        start();
    });
    document.getElementById("btn2x").addEventListener("click", function() {
        startmid();
        start();
    });
    document.getelementById("btn3x").addEventListener("click", function() {
        startlow();
        start();
    });
})();
</script>

We can take that further, though. starthigh, startmid, and startlow all do the same thing, just with different values. So we could have a single function to do that thing, and perhaps a single function that called it and then called start:

<button id="btn1x">1x Bet</button>  
<button id="btn2x">2x Bet</button>    
<button id="btn3x">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.getElementById("btn1x").addEventListener("click", startWith.bind(null 3));
    document.getElementById("btn2x").addEventListener("click", startWith.bind(null 2));
    document.getelementById("btn3x").addEventListener("click", startWith.bind(null 2));
})();
</script>

Or we can store the value to use on the button:

<button class="start" data-value="3">1x Bet</button>  
<button class="start" data-value="2">2x Bet</button>    
<button class="start" data-value="1">3x Bet</button>     
<script> 
(function() { // Scoping function, so its contents aren't globals
    var x;

    function startWithClick() {
        startWith(+this.getAttribute("data-value"));
    }

    function startWith(value) {
        x = value;
        start();
    }

    function start() { 
        alert(x) /*  Undefined (make this DEFINED with code only in startlow/mid/high functions) */
    } 

    // Hook up your handlers
    document.querySelectorAll(".start").forEach(function(btn) {
        btn.addEventListener("click", startWithClick);
    });
})();
</script>

More to explore:

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks so much! I don't know what some of the syntax means that you mention but I'll have a look when I have the time. Before I do though is any of this /not/ beginner friendly? I don't want to delve into a topic which is too complicated for me but if it's all noob friendly then that's great. Thanks again! – Mr Nielsen Nov 07 '18 at 13:37
  • @Nick - `addEventListener` and `querySelectorAll` are both beginner topics. I think `Function#bind` isn't too bad either, but it's not strictly beginner stuff. Basically all I'm using it for above, for instance in `startWith.bind(null 3)`, is to create a new function that, when called, will call `startWith` passing in the value `3` as the first argument. `bind` does more than that, but that's what I'm using it for above. – T.J. Crowder Nov 07 '18 at 13:47
2

T.J. Crowder gives you a very clear answer on how you can solve this problem, and that answer alone should be enough to solve your problem. That answer also mentions that global variables are best avoided, and I thought it would be a good idea to indicate how you can achieve the same thing without using a global:

function starthigh() {
  start(3);
}

function startmid() {
  start(2)
}

function startlow() {
  start(1)
}

function start(x) {
  alert(x)
}
<button onclick="startlow();">1x Bet</button>
<button onclick="startmid();">2x Bet</button>
<button onclick="starthigh();">3x Bet</button>
OliverRadini
  • 6,238
  • 1
  • 21
  • 46