使用单选按钮时无法更改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>