Global value set through different pages

JavaScript
1

Hello All,
I am having issue in accessing a global variable which is getting its value from one HTML page and I am trying to use the same value in another HTML page , my code link is below:

Please check my Script.js file for the variable “Input_height” I am using the same file for my index.html and Grid-page.html.
Please somebody help me.

Thanks in advance.

2

I’m not seeing a variable called Input_height on any of these pages.

3

It is on the Grid-page branch.

You can’t share the variables like you are, here is a version using localStorage.

Summary 
function addGrid() {
  var container = document.getElementsByClassName('container');
  var row = localStorage.getItem('Input_height');
  var col = localStorage.getItem('Input_width');

  for (var i = 0; i < row * col; i++) {
    var gridIDCount = 'Flex-Item-';
    var flex_item = document.createElement('div');
    gridIDCount += i;
    flex_item.setAttribute('id', gridIDCount);
    flex_item.style.border = '1px solid black';
    //flex_item.style.flexgrow = "1";

    flex_item.innerHTML = ' ';
    container[0].appendChild(flex_item);
  }
  container[0].style.height = row * 20 + 10;
  container[0].style.width = col * 20;

  var str = 'repeat(' + row + ', 20px)/repeat(' + col + ', 20px)';
  container[0].style.gridTemplate = str;
}

function validateInput() {
  const Input_height = document.getElementById('Input_height').value;
  const Input_width = document.getElementById('Input_width').value;
  localStorage.setItem('Input_height', Input_height);
  localStorage.setItem('Input_width', Input_width);
  alert(Input_width);
  if (Input_height > 24 || Input_width > 64) {
    alert('Please enter the values in limit');
  } else {
    {
      window.location.href = 'Grid-Page.html';
    }
  }
}