如何使用innerHTML来使用函数更改图像的描述？

Question

唯一起作用的是The语句，即2 if语句不工作(我也尝试了else if语句，而那些语句也不工作)。我需要的描述，以改变当用户单击单选按钮时，根据图像显示。描述应该与图像匹配。我对javascript很陌生。

      <div id = "image-text">
      <p>The statue of liberty was built in France and disassembled and transported by a ship 
       to the United States. It was completed in October of 1886 and is a symbol of freedom.
      </p>
    </div>

    <!-- Radio buttons-->
    <div id = "radio-buttons">
    <form>
    <input type="radio" id="statue-button" name="landmark" checked value="statue" onClick="changeImage('statue');changeText('image-text')";">Statue of Liberty<br>

    <input type="radio" id = "bridge-button" name="landmark" value="bridge" onclick="changeImage('bridge');changeText('image-text')" >Golden Gate Bridge<br>

    <input type="radio" id = "rushmore-button" name="landmark" value="rushmore" onclick="changeImage('rushmore');changeText('image-text')">Mount Rushmore<br>
     </form>
    </div>
    <p></p>
    <!-- Function that changes the description of the image-->
<script>
     function changeText(value) {
   let imageText = document.getElementById('image-text'); 
   let changes = document.getElementById('radio-buttons'); 

  if (value = 'statue') {
    imageText.innerHTML = "The statue of liberty was built in France and disassembled and transported by a ship to the United States. It was completed in October of 1886 and is a symbol of freedom."
      } 
  if  (value === 'bridge') {
    imageText.innerHTML = "The Golden Gate Bridge is a suspension bridge spanning the Golden Gate, the one-mile-wide strait connecting San Francisco Bay and the Pacific Ocean";
  }
  else {
      imageText.innerHTML= "Mount Rushmore National Memorial is a massive sculpture carved into Mount Rushmore in the Black Hills region of South Dakota. It was completed in 1941.";
    }
 }
 </script>

Answer 1

脚本中的错误似乎仅仅是因为您在单击时提供了参数value，并且它被分配给值image-text，而不是函数所期望的值-例如。无论是statue，bridge还是rushmore。

要避免这种“鬼鬼祟祟”的错误，一个建议是使用switch语句，如果它超出了预期值，则设置一些错误。就像这样：

function changeText(value) {
  let imageText = document.getElementById('image-text'); 
  let changes = document.getElementById('radio-buttons'); 

  switch(value) {
    case 'statue':
    imageText.innerHTML = "The statue of liberty was built in France and disassembled and transported by a ship to the United States. It was completed in October of 1886 and is a symbol of freedom.";
    break;

    case 'bridge':
    imageText.innerHTML = "The Golden Gate Bridge is a suspension bridge spanning the Golden Gate, the one-mile-wide strait connecting San Francisco Bay and the Pacific Ocean";
    break;

    case 'rushmore':
    imageText.innerHTML= "Mount Rushmore National Memorial is a massive sculpture carved into Mount Rushmore in the Black Hills region of South Dakota. It was completed in 1941.";
    break;

    default:
    imageText.innerHTML= "*** UNEXPECTED ***";
  }
}

Answer 2

将图像名传递给changeText，而不是“图像文本”。

changeImage('statue');changeText('statue')
                                 ^^^^^^^^
                                   here

一个好的做法是使用console.log来查看您的函数正在接收的值。在函数changeText中编写此调试代码是个好主意：

console.log("changeText() value argument is: " + value);

然后考虑到您的if语句测试的内容，看看" value“的值是否有意义。

此外，使用element.textContent而不是element.innerHTML更安全(但功能较弱)。

Answer 3

很少有错误，比如第一个单选按钮没有像预期的那样关闭。2)您编写了逻辑来处理函数的参数给您的值(即图像的名称)，但是您只是传递id。还要确保您的changeImage函数工作正常。以下是更改文本的工作示例：

​

function changeText(value) {
  let imageText = document.getElementById('image-text');
  let changes = document.getElementById('radio-buttons');

  if (value == 'statue') {
    imageText.innerHTML = "<p>The statue of liberty was built in France and disassembled and transported by a ship to the United States. It was completed in October of 1886 and is a symbol of freedom.</p>"
  } else if (value === 'bridge') {
    imageText.innerHTML = "<p>The Golden Gate Bridge is a suspension bridge spanning the Golden Gate, the one-mile-wide strait connecting San Francisco Bay and the Pacific Ocean</p>";
  } else {
    imageText.innerHTML = "<p>Mount Rushmore National Memorial is a massive sculpture carved into Mount Rushmore in the Black Hills region of South Dakota. It was completed in 1941.</p>";
  }
}

<div id="image-text">
  <p>The statue of liberty was built in France and disassembled and transported by a ship to the United States. It was completed in October of 1886 and is a symbol of freedom.
  </p>
</div>

<!-- Radio buttons-->
<div id="radio-buttons">
  <form>
    <input type="radio" id="statue-button" name="landmark" checked value="statue" onclick="changeText('statue')" />Statue of Liberty<br>

    <input type="radio" id="bridge-button " name="landmark" value="bridge " onclick="changeText('bridge')" />Golden Gate Bridge<br>

    <input type="radio" id="rushmore-button" name="landmark" value="rushmore " onclick="changeText('rushmore') ">Mount Rushmore<br>
  </form>
</div>
<p></p>

​