This is one of a series of questions which thanks to the help I have received is nearly solved. But there remains, one problem. I now have the code below.
<span id="text">Change</span>
<P>
<select class="selector">
<option value=X1a selected>X1a</option>
<option value=X2a>X2a</option>
<option value=X3a>X3a</option>
<option value=X4a>X4a</option>
</select>
<P>
<span id="WW"></span>
<script>
let X1a = 'Test 1'
let X2a = 'Test 2'
let X3a = 'Test 3'
let X4a = 'Test 4'
const span = document.getElementById('text');
document.querySelector('.selector')
.addEventListener('change', event => {
const thisValue = event.currentTarget.value; // get current value
const text = `${thisValue}`;
span.innerText = text; // change span text
//document.getElementById(thisValue).innerText = text; // change p value
//Option 1
//let ZZ = X2a
//Option 2
let ZZ = text
document.getElementById("WW").innerHTML = ZZ;
});
</script>
When I run the code with option 1 where ZZ is set equal to X2a it prints the line associated with X2a above (ie Test2). But when I run Option 2 it simply prints X2a and doesn't "call" the Test2 line. Why when I set ZZ = X2a does it call the line but when I set ZZ = text (and text I know is equal to X2a) doesn't it do so.
Incidentally I have tried the option of using
let ZZ = document.getElementById("text")
document.getElementById("WW").innerHTML = ZZ.textContent;
and that doesn't change anything. It still prints X2a rather than the line which X2a should call.
If you want to access those variables you have to make all four variable as var instead of let because let behave differently it does not get stored in the window object which I think is the way you can access those variables and instead of writing the value of the variable text in template string you should declare the window object and access the variables there as shown in the code below `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span id="text">Change`enter code here`</span>
<p>
<select class="selector">
<option value="X1a" selected>X1a</option>
<option value="X2a">X2a</option>
<option value="X3a">X3a</option>
<option value="X4a">X4a</option>
</select>
</p>
<p>
<span id="WW"></span>
<script>
var X1a = 'Test 1';
var X2a = 'Test 2';
var X3a = 'Test 3';
var X4a = 'Test 4';
const span = document.getElementById('text');
document
.querySelector('.selector')
.addEventListener('change', function (event) {
const thisValue = event.currentTarget.value; // get current value
const text = window[thisValue];
console.log(this);
span.innerText = text; // change span text
//document.getElementById(thisValue).innerText = text; // change p value
//Option 1
//let ZZ = X2a
//Option 2
let ZZ = text;
document.getElementById('WW').innerHTML = ZZ;
});
</script>
</p>
</body>
</html>
`