'A function that works on an HTML page but not on the other one

I have a problem with the snippet below : everything works perfectly when I press the button on the 1st page. But it tells me that "secondPageItems" is not defined when I press the button on the 2nd page. (here every thing works fine because it's on the same HTML page)

Even stranger, if I put "secondPageItems" and "secondPageHiden" above "firstPageItems" and "firstPageHiden" on my JS sheet, the buttons on the 1st page doesn't work, but the buttons on the second page works fine :(

let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = [hidenItemA1, hidenItemB1];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = [hidenItemC1, hidenItemD1];

function Show(x) {
  $(x).slideDown("fast");
}
function Hide(x) {
  $(x).slideUp("fast");
}

function controlFn(a, b) {
    document.getElementById(a+b).checked = true;
}

function control1(x, y) {
  let z = "1";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Show(y[i]);
  }
 }
function control2(x, y) {
  let z = "2";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
function control3(x, y) {
  let z = "3";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}

.hidenItem {
  display: none;
}

<!-- First page: -->
<div>
  <span>Control :</span>
  <input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
  <input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
  <input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
  <label for="radioA1">This is Item A1</label>
  <input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
  <label for="radioA2">This is Item A2</label>
  <input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
  <label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
  <input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
  <label for="radioB1">This is Item B1</label>
  <input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
  <label for="radioB2">This is Item B2</label>
  <input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
  <label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>

<!-- Second page: -->
<div>
  <span>Control :</span>
  <input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
  <input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
  <input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
  <label for="radioC1">This is Item C1</label>
  <input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
  <label for="radioC2">This is Item C2</label>
  <input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
  <label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
  <input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
  <label for="radioD1">This is Item D1</label>
  <input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
  <label for="radioD2">This is Item D2</label>
  <input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
  <label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution 1:^[1]

Ok so I found the problem.

I don't know why, probably something going on with jQuery, but when I changed

function Show(x) {
$(x).slideDown("fast");
}

Into :

function Show(x) {
$("#"+x).slideDown("fast");
}

(and same for Hide(x)).

And I added some "" for my hidenItemA1, ... , it solved my problem :)

So the final code would be :

let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = ["hidenItemA1", "hidenItemB1"];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = ["hidenItemC1", "hidenItemD1"];

function Show(x) {
  $("#"+x).slideDown("fast");
}
function Hide(x) {
  $("#"+x).slideUp("fast");
}

function controlFn(a, b) {
    document.getElementById(a+b).checked = true;
}

function control1(x, y) {
  let z = "1";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Show(y[i]);
  }
 }
function control2(x, y) {
  let z = "2";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}
function control3(x, y) {
  let z = "3";
  for (i = 0; i < x.length; i++) {
    controlFn(x[i], z);
    Hide(y[i]);
  }
}

.hidenItem{
 display:none;
}

<!-- First page: -->
<div>
  <span>Control :</span>
  <input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
  <input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
  <input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
  <label for="radioA1">This is Item A1</label>
  <input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
  <label for="radioA2">This is Item A2</label>
  <input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
  <label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
  <input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
  <label for="radioB1">This is Item B1</label>
  <input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
  <label for="radioB2">This is Item B2</label>
  <input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
  <label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>

<!-- Second page: -->
<div>
  <span>Control :</span>
  <input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
  <input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
  <input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
  <input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
  <label for="radioC1">This is Item C1</label>
  <input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
  <label for="radioC2">This is Item C2</label>
  <input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
  <label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
  <input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
  <label for="radioD1">This is Item D1</label>
  <input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
  <label for="radioD2">This is Item D2</label>
  <input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
  <label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Myk Ado

'A function that works on an HTML page but not on the other one

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]