Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unable to properly change one variable and access it in another JS File

I’m creating a variable called current to store what button was just clicked. Then I want to use that info in another JS File when loading up a new HTML page. However, current still remains as "my_null". I’m assuming it’s still my_null because when file2 creates the new page, the problem_type_title displays "my_null"

I expected current to change to the value that I passed in based on which button was clicked. I ordered the JS Files correctly in my HTML files when using . I know the variable is being passed through files as problem_type is "my_null" and not undefined. However, it shouldn’t be "my_null" and should be "Geometry" for example.

Here is file 1

const geo = document.getElementById('geo');
const algebra = document.getElementById('alegbra');
const centroid = document.getElementById('centroid');
const angle_bisector = document.getElementById('angle_bisector');
const two_pole = document.getElementById('two_pole');
const herons = document.getElementById('herons');
const x_intercept = document.getElementById('x_intercept');
const inverse_functions = document.getElementById('inverse_functions');
const challenge = document.getElementById('challenge');
var current = 'my_null';

geo.addEventListener('click', () => {update_curr('Geometry')});
alegbra.addEventListener('click', () => {update_curr('Alegbra')});
centroid.addEventListener('click', () => {update_curr('Centroid')});
angle_bisector.addEventListener('click', () => {update_curr('Angle Bisector')});
two_pole.addEventListener('click', () => {update_curr('Two Pole')});
herons.addEventListener('click', () => {update_curr("Heron's Formula")});
x_intercept.addEventListener('click', () => {update_curr('X-intercept')});
inverse_functions.addEventListener('click', () => {update_curr('Inverse Functions')});
challenge.addEventListener('click', () => {update_curr('Challenge Problems')});


function update_curr(clicked) {
    current = clicked;
}

Here is file 2

// Deleted code before this function for readability
async function update(url){
  // Setting value of current as a variable in this function
  let problem_type = current;
  let id = await set_problem(url);
  url = url + "challenges/" + id;
  console.log(url);
  console.log("id = " + id)
  fetch(url).then(res => res.json())
  .then(function(problem) {
      console.log(problem);
      img = problem.img;
      answer = problem.answer;
      div_main = document.createElement('div');
      div_main.innerHTML = `
        <div class='trainer_area' id='trainer_area'>
            <div class='problem_type_title'>
                // Accessing the variable
                ${problem_type}
            </div>
       // More code that doesn't matter
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I don't really know why the problem was occurring but I used localStorage and onclick() instead of addEventListener() and I got the information to pass between files. The root of my error was likely something wrong with addEventListener as I saw my console giving me error related to that.

    File 1:

    const geo = document.getElementById('geo');
const algebra = document.getElementById('algebra');
const centroid = document.getElementById('centroid');
const angle_bisector = document.getElementById('angle_bisector');
const two_pole = document.getElementById('two_pole');
const herons = document.getElementById('herons');
const x_intercept = document.getElementById('x_intercept');
const inverse_functions = document.getElementById('inverse_functions');
const challenge = document.getElementById('challenge');

if (geo) geo.onclick = () => { update_curr('Geometry') };
if (algebra) algebra.onclick = () => { update_curr('Algebra') };
if (centroid) centroid.onclick = () => { update_curr('Centroid') };
if (angle_bisector) angle_bisector.onclick = () => { update_curr('Angle Bisector') };
if (two_pole) two_pole.onclick = () => { update_curr('Two Pole') };
if (herons) herons.onclick = () => { update_curr("Heron's Formula") };
if (x_intercept) x_intercept.onclick = () => { update_curr('X-intercept') };
if (inverse_functions) inverse_functions.onclick = () => { update_curr('Inverse Functions') };
if (challenge) challenge.onclick = () => { update_curr('Challenge Problems') };

function update_curr(clicked) {
    localStorage.setItem('current_problem_type', clicked)
}

    File 2:

    let problem_type = localStorage.getItem('current_problem_type')
console.log(problem_type)


  2. 0

    You can define a getter function to get the latest value of the current variable.

    Try this :

    file1

    const geo = document.getElementById('geo');
const algebra = document.getElementById('alegbra');
const centroid = document.getElementById('centroid');
const angle_bisector = document.getElementById('angle_bisector');
const two_pole = document.getElementById('two_pole');
const herons = document.getElementById('herons');
const x_intercept = document.getElementById('x_intercept');
const inverse_functions = document.getElementById('inverse_functions');
const challenge = document.getElementById('challenge');
var current = 'my_null';

geo.addEventListener('click', () => {update_curr('Geometry')});
alegbra.addEventListener('click', () => {update_curr('Alegbra')});
centroid.addEventListener('click', () => {update_curr('Centroid')});
angle_bisector.addEventListener('click', () => {update_curr('Angle Bisector')});
two_pole.addEventListener('click', () => {update_curr('Two Pole')});
herons.addEventListener('click', () => {update_curr("Heron's Formula")});
x_intercept.addEventListener('click', () => {update_curr('X-intercept')});
inverse_functions.addEventListener('click', () => {update_curr('Inverse Functions')});
challenge.addEventListener('click', () => {update_curr('Challenge Problems')});


function update_curr(clicked) {
    current = clicked;
}

export function get_curr() {
    return current;
}

    file2

    import {get_curr} from './file1';
// Deleted code before this function for readability
async function update(url){
  // Setting value of current as a variable in this function
  let problem_type = get_curr();
  let id = await set_problem(url);
  url = url + "challenges/" + id;
  console.log(url);
  console.log("id = " + id)
  fetch(url).then(res => res.json())
  .then(function(problem) {
      console.log(problem);
      img = problem.img;
      answer = problem.answer;
      div_main = document.createElement('div');
      div_main.innerHTML = `
        <div class='trainer_area' id='trainer_area'>
            <div class='problem_type_title'>
                // Accessing the variable
                ${problem_type}
            </div>
       // More code that doesn't matter
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search