Add javascript global variable inside function

Question

Does anyone know how to use a global declared variable inside the following function?

Global value:

window.waarde = document.getElementById("id_x").value;

Function:

$(function () {
  $('input[value="This is where the variable should be"]')
    .filter(':visible:first')
    .prop('checked', true);
});

I've looked everywhere but can't find an answer.

Well, at first i'm a total js noob :-) It seems the code didn't work because of the straight '' instead of these `` . Now it does work with `` — Sybrentjuh
– Sybrentjuh, Commented Jan 20, 2020 at 12:37

Archie · Accepted Answer · 2020-01-20 12:26:24Z

3

Use it like a normal variable. Accessing a property from a object.

window.waarde = document.getElementById("id_x").value; .

$(function () { 
  $(`input[value="${window.waarde}"]`)
      .filter(':visible:first')
      .prop('checked', true)
});

answered Jan 20, 2020 at 12:26

Archie

9114 silver badges11 bronze badges

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

2 Comments

Sybrentjuh Over a year ago

Nice, this worked! Did you write $(input[value="${window.waarde}"]) for a reason with `` instead of '' ? When I used the straight ones it didn't work, but with these `` it does work!

Archie Over a year ago

Yes. Read this developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Jazzpaths · Accepted Answer · 2020-01-20 12:46:27Z

0

In general once you got a variable in a script like this, it will be available also within your functions:

myvar = 10; // Same as window.myvar = 10;

function readMyVar() {
  console.log( myvar ); // Will output 10
}

in your case to access the variable inside your function:

waarde = document.getElementById("id_x").value;

$(function () {
  $(`input[value="${waarde}"]`)
    .filter(':visible:first')
    .prop('checked', true);
});

or just:

$(function () {
  $('input[value="' + waarde + '"')
    .filter(':visible:first')
    .prop('checked', true);
});

edited Jan 20, 2020 at 12:46

answered Jan 20, 2020 at 12:31

Jazzpaths

7095 silver badges11 bronze badges

3 Comments

Sybrentjuh Over a year ago

Thanks! The first one doesnt work, the second one does work. What exactly is the difference in " or ' ?

Jazzpaths Over a year ago

Yes, it's because of the missed backticks, around the ${}, but the simplest solution is the second one :) If you want to read more about Javascript String Templates: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…. Now I've corrected the error.

Jazzpaths Over a year ago

The single quote char ( ' ) is used to define the selector, the double quote to define the value of the value attribute. We need to interrupt insert the waard value which otherwise would have been interpreted just as text and the selector would look like this: 'input[value="waarde"]'.

Jignesh Raval · Accepted Answer · 2020-01-20 12:59:31Z

@Sybrentjuh, As you have get the desired answer, still I would like to share my answer for the same. I hope that will be helpful.

var waarde = document.getElementById("id_x").value;

$(function () {
  $('input[type=checkbox][value="'+waarde+'"]')
    .filter(':visible:first')
    .prop('checked', true);
});

function filterCheckboxList() {
  waarde = document.getElementById("id_x").value;
  console.log('Checking...', waarde);
  
  // First uncheck all
  $('input[type=checkbox]').prop('checked', false);
  
  // Check only those value matches
  $('input[type=checkbox][value="'+waarde+'"]')
      .filter(':visible:first')
      .prop('checked', true);
}

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

<input type="text" value="10" id="id_x" onChange="filterCheckboxList()" />

<input type="checkbox" value="10" /> Checkbox 1
<input type="checkbox" value="10" /> Checkbox 2
<input type="checkbox" value="15" /> Checkbox 3
<input type="checkbox" value="12" /> Checkbox 4
<input type="checkbox" value="12" /> Checkbox 5

Thanks, Jignesh Raval

Collectives™ on Stack Overflow

Add javascript global variable inside function

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related