Redefine a function using a function in Javascript

Question

Here is a script that does some stuff, but the most importantly, it constantly changes the value of inDynamicEditMode from 0 to 1 and from 1 to 0. I'm trying to create a function that'd redefine the function payx() if inDynamicEditMode is 0 (or 1). I'm posting the entire script just in case I delete something important.

var start = 0.01

var $input = $("#oddsInput")
var $odds = $("#oddsOverUnder")
var $button = $("#roll")
var $bet = $("#bet")
var $pay = $("#oddsPayout.btn.btn-primary.btn-xlg.btn-block")
var inDynamicEditMode   = true; 

function basex() {
    $bet.val(start)
}

function timesx() {
    var lol = document.getElementById('bet').value; 
    $bet.val(lol * 8)
}

function paylowx() {
    $pay.click()
    document.getElementById("oddsInput").value = "1.2";
    $odds.click()
}

function payhighx() {
    $pay.click()
    document.getElementById("oddsInput").value = "5.2";
    $odds.click()
}

function payx(){

}

var mars = document.createElement('div');

mars.innerHTML = '' +
    '<div class="form-group">' +
    '<div class="text-center col-sm-6 col-sm-offset-3">' +
    '<input id="base" type="button" value="BASE" onClick="basex()">' +
    '<input id="times" type="button" value="x8" onClick="timesx()">' +
    '<input id="paylow" type="button" value="1.2" onClick="paylowx()">' +
    '<input id="payhigh" type="button" value="5.2" onClick="payhighx()">' +
    '</div>' +
    '</div>';
document.getElementsByClassName('text-center col-sm-6 col-sm-offset-3')[0].appendChild(mars);

var mybase = document.querySelector("#base");
mybase.style.backgroundColor = "#131313";
mybase.style.borderStyle = "none";
mybase.style.borderRadius = "6px 0px 0px 0px"
mybase.style.color = "#fff"
mybase.style.fontSize = "18px"
mybase.style.width = "80px"
mybase.style.height = "40px"

var mytimes = document.querySelector("#times");
mytimes.style.backgroundColor = "#131313";
mytimes.style.borderStyle = "none";
mytimes.style.borderRadius = "0px 6px 0px 0px"
mytimes.style.color = "#fff"
mytimes.style.fontSize = "18px"
mytimes.style.width = "80px"
mytimes.style.height = "40px"

var mypaylow = document.querySelector("#paylow");
mypaylow.style.backgroundColor = "#131313";
mypaylow.style.borderStyle = "none";
mypaylow.style.borderRadius = "0px 0px 0px 6px"
mypaylow.style.color = "#fff"
mypaylow.style.fontSize = "18px"
mypaylow.style.width = "80px"
mypaylow.style.height = "40px"

var mypayhigh = document.querySelector("#payhigh");
mypayhigh.style.backgroundColor = "#131313";
mypayhigh.style.borderStyle = "none";
mypayhigh.style.borderRadius = "0px 0px 6px 0px"
mypayhigh.style.color = "#fff"
mypayhigh.style.fontSize = "18px"
mypayhigh.style.width = "80px"
mypayhigh.style.height = "40px"

var myhalf = document.querySelector("#halfBetButton");
myhalf.style.display = "none"

var mydouble = document.querySelector("#doubleBetButton");
mydouble.style.display = "none"


function roll() {
    $bet.val(start)
    $button.click()
    setTimeout(function() {

        var tr = document.querySelector("#myBetsTable tr:nth-child(2)")
        var cls = tr.getAttribute('class')

        if (cls === 'success'){
            payx()
        }
        else{
            payx()
            inDynamicEditMode ^= true
        }
            $button.click();
    setTimeout(function() {
            $button.click();
            },1000);
            },1000);
}

setInterval(roll, 2000)

Here are the two functions

        if(inDynamicEditMode == 0){
            function payx() {
            $pay.click()
            document.getElementById("oddsInput").value = "1.2";
            $odds.click()
        }

        if(inDynamicEditMode == 1){
            function payx() {
            $pay.click()
            document.getElementById("oddsInput").value = "5.2";
            $odds.click()
        }

No, [you can't](http://stackoverflow.com/q/24573061/1048572). — Bergi, Apr 23 '16 at 15:51
Why don't you keep one *payx* function with the construct `if(inDynamicEditMode == 0){` inside of it? Also, you are not asking any question... — trincot, Apr 23 '16 at 15:51
Could you give some feed-back to the answers given, and decide which one to accept? — trincot, Apr 25 '16 at 07:28

SEUH · Accepted Answer · 2016-04-23T15:52:54.407

1

You can declare function like a variable.

// Therefore
payx = function() {
  // script
}
payx();

In your code

if (inDynamicEditMode == 0) {
  payx = function() {
    $pay.click()
    document.getElementById("oddsInput").value = "1.2";
    $odds.click()
  }
}

if(inDynamicEditMode == 1){
  payx = function() {
    $pay.click()
    document.getElementById("oddsInput").value = "5.2";
    $odds.click()
  }
}

If u ask why you should do that, it's efficient if you call the function often.

edited Apr 23 '16 at 15:52

answered Apr 23 '16 at 15:51

SEUH

314
3
15

1

You still should add a `var payx;` in front to actually *declare* the variable. – Bergi Apr 23 '16 at 15:52
@Bergi there is no "should". Declaring a variable as global is fine. If he needs to, he can declare it. – SEUH Apr 23 '16 at 15:53
Yes, it is a "should", and in strict mode it would be a "must". The code you posted doesn't declare anything, it's just an assignment that accidentally ends up with a global variable. – Bergi Apr 23 '16 at 15:57
@Bergi Yes, we could start a discussion about this, but because the OP didn't declare anything as "strict", there is no should. Someone who uses strict mode, should know how to declare a variable. – SEUH Apr 23 '16 at 16:01
1

Well everyone *should* use strict mode as well these days… – Bergi Apr 23 '16 at 16:02

score 1 · Answer 2 · answered Apr 23 '16 at 15:52

Well, for starters, you could define a single payx() function, that accepts the inDynamicEditMode parameter as an argument, like so:

function payx(inDynamicEditMode) {
  if (inDynamicEditMode === 0) {
    // do stuff
  }
  if (inDynamicEditMode === 1) { 
    // do some other stuff
  }
}

Alternatively, you can just assign a function expression to payx() like so:

// somewhere above
var payx = function() {
  // do stuff, maybe default?
};

if (inDynamicEditMode === 0) {
  payx = function() {
    // do stuff
  };
}

if (inDynamicEditMode === 1) {
  payx = function() {
    // do other stuff
  };
}

The example above would need to be called every time you suspect a change in inDynamicEditMode.

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

Why not use one function (without redefinitions) and use the ternary operator inside that function to determine which value to assign:

function payx() {
    $pay.click();
    document.getElementById("oddsInput").value = inDynamicEditMode ? "5.2" : "1.2";
    $odds.click();
}

Redefine a function using a function in Javascript

3 Answers3