How can I use innerHTML to change the description of an image using a function?-CodePudding

The only thing that works is the else statement the 2 if statements do not work( I also tried else if statements and those do not work either). I need the description to change when the user clicks on the radio button according to the image displayed. The description should match the image. I am new to 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>

CodePudding user response：

It seems the bug in your script is simply because you provide the parameter value on click and it is assigned to the value image-text instead of what the function expects - eg. either statue, bridge or rushmore.

One suggestion to avoid such "sneaky" bugs, could be to use a switch statement and set some error if it falls through the expected values. Something like this:

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 ***";
  }
}

CodePudding user response：

Pass the image name to changeText instead of "image-text", e.g.

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

A good practice is to use console.log to see what value your function is receiving. It would have been a good idea to write this debug code inside the function changeText:

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

Then look to see if the value of "value" makes sense given what your if statements are testing for.

Also it's safer (but less powerful) to use element.textContent rather than element.innerHTML.

CodePudding user response：

There were few errors like 1) First radio button wasn't closed as expected. 2) You have written the logic to handle the value that your function's parameter gives you (i.e, name of the image) but you are simply passing the id. Also make sure your changeImage function works fine. Here's the working example of changing text:

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>

CodePudding user response：

Your imageText element is the parent of the text.
Give an id to the <p> element.
Then select it to be the imageText
Also, where is the changeImage function?
Example:

<!-- html -->
<div id='image-text'>
    <p id='text'>The statue ...</p>
</div>
<script>
    // js
    const imageText = document.getElementById('text');

    .
    .
    .
</script>

Every other thing you did is correct.