如何更改＆lt; p id = [value] in html中的值

Question

我以前曾问过这个问题的版本，非常感谢我得到的帮助，但我仍然卡住了，所以我认为最好问一个精致的问题，该问题现在可以到达Nub。

我有以下代码。这个想法是select命令应选择一个值（最初是XA，但可以是XB，XC，XD），然后将其替换为opent＆lt; span; span行中的Xa，并导致适当的<代码> document.getElementById line in tor写作。

但这无法正常工作。谁能告诉我如何纠正它。

<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

首先，我会修复您的HTML并确保您的ID唯一，然后您可以执行以下操作

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>