How do I change the value in <p id=[value] in html - html

Question

I've asked a version of this question before and am very grateful for the help I've got but I'm still stuck so I thought it better to ask a refined question which now gets to the nub.
I've got the code below. The idea is that the select command should choose a value (initially XA, but could be XB, XC, XD) which will then be substituted for XA in the opening <span line and cause the appropriate document.getElementById line at the end to write.
But it doesn't work as it stands. Can anyone tell me how to correct it.
<span id="XA">Change</span>
<P>
<select class="selector" onchange="document.querySelector('p').id=this.value; console.log(document.querySelector('p').id)">
<option value="XA" selected>XA</option>
<option value="XB">XB</option>
<option value="XC">XC</option>
<option value="XD">XD</option>
</select>
<p id="XA"></p>
<p id="XB"></p>
<p id="XC"></p>
<p id="XD"></p>
<script>
document.getElementById("XA").innerHTML = "Option is XA";
document.getElementById("XB").innerHTML = "Option is XB";
document.getElementById("XC").innerHTML = "Option is XC";
document.getElementById("XD").innerHTML = "Option is XD";
</script>

Answer 1

First I would fix your html and make sure your ids are unique then you can do the following
const span = document.getElementById('text');
document.querySelector('.selector')
.addEventListener('change', event => {
const thisValue = event.currentTarget.value; // get current value
const text = `Option is ${thisValue}`;
span.innerText = text; // change span text
document.getElementById(thisValue).innerText = text; // change p value
});
<span id="text">Change</span>
<select class="selector">
<option value="XA" selected>XA</option>
<option value="XB">XB</option>
<option value="XC">XC</option>
<option value="XD">XD</option>
</select>
<p id="XA"></p>
<p id="XB"></p>
<p id="XC"></p>
<p id="XD"></p>