javascript - 使用单选按钮时无法更改innerHTML

Question

我正在尝试更改，但目前当我检查其他单选按钮时它不会更改文本。

我尝试更改 HTML 输入中的值，并搜索 mozilla JS 帮助程序，但似乎找不到修复方法。

let shapeChoice = document.querySelector('input[name="shape"]:checked').value;

switch (shapeChoice) {
  case 'circV':
    document.getElementById("debug1").innerHTML = "Circle Area"
    break;

  case 'rectV':
    document.getElementById("debug1").innerHTML = "Rectangle Area"
    break;

  case 'triV':
    document.getElementById("debug1").innerHTML = "Triangle Area"
    break;

  case 'paraV':
    document.getElementById("debug1").innerHTML = "Parallelogram Area"
    break;

  default:
    doucment.getElementById("debug1").innerHTML = "Default"
}

<div id="radioHeader">
  <input type="radio" name="shape" value="circV" onclick="" checked>
  <label for="circleID">Circle</label>

  <input type="radio" name="shape" value="rectV">
  <label for="rectangleID">Rectangle</label>

  <input type="radio" name="shape" value="triV">
  <label for="triangleID">Triangle</label>

  <input type="radio" name="shape" value="paraV">
  <label for="parallelogramID">Parallelogram</label> <br>

  <p id="debug1"></p>
</div>

加载时“圆形区域”应显示在单选框下方，但在检查其他单选框后，它会更改为相应形状的 + 区域。

但是，即使我选中另一个单选框，我也只能得到“圆形区域”。

Answer 1

您应该附加一个 onclick 事件。当事件发生时，检查所有情况。正如我下面所描述的。

function radioClicked(){
  let shapeChoice = document.querySelector('input[name="shape"]:checked').value;

switch (shapeChoice) {
  case 'circV':
    document.getElementById("debug1").innerHTML = "Circle Area"
    break;

  case 'rectV':
    document.getElementById("debug1").innerHTML = "Rectangle Area"
    break;

  case 'triV':
    document.getElementById("debug1").innerHTML = "Triangle Area"
    break;

  case 'paraV':
    document.getElementById("debug1").innerHTML = "Parallelogram Area"
    break;

  default:
    doucment.getElementById("debug1").innerHTML = "Default"
}
};

radioClicked();

<div id="radioHeader" onload="radioClicked()" onclick="radioClicked()" >
    <input type="radio" name="shape" value="circV" onclick="" checked>
    <label for="circleID">Circle</label>
  
    <input type="radio" name="shape" value="rectV">
    <label for="rectangleID">Rectangle</label>
  
    <input type="radio" name="shape" value="triV">
    <label for="triangleID">Triangle</label>
  
    <input type="radio" name="shape" value="paraV">
    <label for="parallelogramID">Parallelogram</label> <br>
  
    <p id="debug1"></p>
  </div>