Variable in Jquery not defined in javascript

Question

I have 2 pieces of code, one jQuery which checks the value of an input field and then takes this value a manipulates the CSS relatively. I have some vanilla Javascript and I was looking to use my jQuery to manipulate the JS as the jQuery is outside code block. How would I able to use the variables inside the jQuery in my vanilla Javascript?

$(document).ready(function() {
  $('input').change(function() {
    var val = $(this).val();
    var inputNo = (10 / val);
    if (val > 0) {
      $(".orb").addClass("rotating");
      $('.rotating').css("animation", "rotating " + inputNo + "s linear infinite");
    } else {
      $(".orb").removeClass("rotating");
    }
    console.log(inputNo);
  });
});

function init() {
  ctx.shadowColor = "#57e0c1";
  ctx.shadowBlur = inputNo;
  for (var i = 0; i <= totalTentacles - 1; i++) {
    lines[lines.length] = new Line();
  }
  animate();
}
init();

why you are separating those parts? Just move the init() inside the ready() and move the inputNo declaration out of change — Calvin Nunes
– Calvin Nunes, Commented Nov 13, 2018 at 13:24
You could pass inputNo as an argument to init(), although I'm not sure why you'd ever want to do this as init() only runs once on load and wouldn't have any need of the inputNo value...? — Rory McCrossan
– Rory McCrossan, Commented Nov 13, 2018 at 13:26

XaxD · Accepted Answer · 2018-11-13 13:26:07Z

1

The variable is scoped within the $('input').change function. This essentially means it disappears when the function ends. If you want it to be accessible to multiple function, you need to initialize it outside the function.

Eg.

var inputNo = 0; // declared outside function block

$(document).ready(function() {
  $('input').change(function(){
    var val = $(this).val();
    inputNo = (10 / val);
        if (val > 0) {
            $(".orb").addClass("rotating");
            $('.rotating').css("animation","rotating "+ inputNo +"s linear infinite");
        }
        else {
            $(".orb").removeClass("rotating");
        }
        console.log(inputNo);
  });
});


function init() {
  ctx.shadowColor = "#57e0c1";
  ctx.shadowBlur = inputNo;
  for (var i = 0; i <= totalTentacles - 1; i++) {
    lines[lines.length] = new Line();
  }
  animate();
}
init();

Note, there are deeper issues in your code however than simple variable scoping. For example, your init function will need to be called again within the change function if you want to update the shadow-blur on change as well.. so replace console.log(inputNo); with another init(); call.

answered Nov 13, 2018 at 13:26

XaxD

1,55815 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user10629012 Over a year ago

Thank you for the help, this is great however val which is also defined inside the .ready function needs to be accessed by this code.. I have tried putting everything in the .ready function but this dose not work..

Collectives™ on Stack Overflow

Variable in Jquery not defined in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related