do something if variable changes

Question

I want to disable button if user didnt add anything into global variable "code". I tryied indexOf() however it is reactive only once. Lets say if i have button that adds "z" into "code" global variable, it does not execute function inside indexOf("z"); Can anybody help?

let code = "";

$(document).ready(() => {
      function codeCheck() {
        if (code = "") {
          console.log("nothing")
        } else if (code.indexOf("z")) {
          console.log("do semething")
        }
      }

      code = "z";
      codecheck();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You check conditions with `==` and not `=` in your if. You also shouldn't declar a function inside the onready — Islam Elshobokshy, Jan 29 '19 at 08:58
@IslamElshobokshy there's nothing inherently wrong with declaring a function within `document.ready` — Rory McCrossan, Jan 29 '19 at 09:03
@RoryMcCrossan oh that I didn't know ^^ I always thought it was a bad idea — Islam Elshobokshy, Jan 29 '19 at 09:03
`codecheck();` is called yet you defined `code` **C** `heck()` go to https://jshint.com — zer00ne, Jan 29 '19 at 09:08

Islam Elshobokshy · Accepted Answer · 2019-01-29T09:05:55.787

1

You should rather use the includes function to check if your string contains a substring

let code = "";

$(document).ready(() => {
  function codeCheck() {
    if (code == "") {
      console.log("nothing")
    } else if (code.includes("z")) {
      console.log("do something")
    }
  }

  code = "z";
  codeCheck();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Jan 29 '19 at 09:05

answered Jan 29 '19 at 09:02

Islam Elshobokshy

8,788
6
20
45

hawks · Answer 2 · 2020-10-19T08:51:51.370

To compare the value of your var in the if condition you have to use == or === operator. Your are using the assigment operator.

let code = "";

$(document).ready(() => {
    function codeCheck() {
        if (code === "") { // <--
            console.log("nothing")
        } else if (code.indexOf("z") > -1) {
            console.log("do semething")
        }
    }

    code = "z"; 
    codecheck();
});

Tenzin Kunkyab · Answer 3 · 2019-01-29T09:33:54.970

You need to figure out how the value "code" is being updated. If it's via a button, add an EventListener that calls the codeCheck method. In the following snippet I used a jQuery change function.

let code = "";

$(document).ready(() => {
  $("#myCode").change( function(ev) {
     let newVal = ev.target.value; // this will contain the value in the textbox
     code = newVal;
     codeCheck();
  });
  function codeCheck() {
    if (code == "") {
      console.log("nothing")
    } else if (code.includes("z")) {
      console.log("do something")
    }
  }
});

<input type="text" id="myCode" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can then iterate over the above approach and add a button.

<button onClick="addZToMyCode()">Add Z</button>
//JS
function addZToMyCode() {
  code += "z";
  codeCheck();
}

AFAIK I don't think we can put an event listener to a variable in JS. Edit: found this answer on Stackoverflow that you might be interested in.

I'm here to learn as well, can I know why the answer was down-voted? — Tenzin Kunkyab, Jan 29 '19 at 10:16

do something if variable changes

3 Answers3