I'm working on this section of a website but I can't understand where I'm failing at changing the display style of the images when a radio input is checked... I've read all the other answers but could not get it to work. As you can see in the snippet both the images (random images from web) are showing at all times. Thank you for the help

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  background-color: #000;
  color: #eaeaea;
}

h1 {
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
}

h2 {
  font-size: 2.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

h3 {
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #fff;
}

p {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 300;
}

.tipologie-di-ispezione {
  grid-row: 5/6;
  margin-left: 15vw;
  margin-right: 15vw;
  margin-bottom: 10vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tipologie-di-ispezione h3{
  font-size: 5vh;
  margin-bottom: 7vh;
}

.ispezione-left {
  grid-column: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 55vh;
}

.ispezione-right {
  grid-column: 2/3;
  background-image: -webkit-linear-gradient(left, #343434, #212121);
  background-image: -o-linear-gradient(left, #343434, #212121);
  background-image: linear-gradient(to right, #343434, #212121);
  border-radius: 10px;
  margin-left: -20vw;
  height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ispezione-right img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.tipologie-ispezione {
  margin: 5vh 0vh 5vh 0vh;
}

.tipologie-ispezione label {
  background-image: -webkit-linear-gradient(left, #343434, #212121);
  background-image: -o-linear-gradient(left, #343434, #212121);
  background-image: linear-gradient(to right, #343434, #212121);
  border-radius: 10px;
  padding: 1vw 4vw 1vw 4vw;
  color: #fff;
  font-size: 2.5vh;
  margin-left: 0vh;
}

<!-- Esempi di Ispezione -->
<div >
  <h3>TIPOLOGIE DI ISPEZIONE</h3>
<div >
    <div >
      <label for="ispezione1">ISPEZIONE 1
        <input onChange='sezioneispezione()' type="radio" id="ispezione1" name="ispezioni" value="1" checked>
      </label>
    </div>
    <div >
      <label for="ispezione2">ISPEZIONE 2
        <input onChange='sezioneispezione()' type="radio" id="ispezione2" name="ispezioni" value="2">
      </label>
    </div>

</div>
<div >
  <img id="ispezione1img" src="https://media.istockphoto.com/vectors/fire-inspection-abstract-concept-vector-illustration-vector-id1287434990?k=20&m=1287434990&s=612x612&w=0&h=ThAnvYANbUq-_7BHG0dvauBdot_CaR_TIsUOfRqA690=" alt="ispezione1.png" >
  <img id="ispezione2img" src="https://img.freepik.com/free-vector/qa-tester-developmental-kit-analyzing-binary-code-close-inspection-coding-checking-open-script-website-administration-reaffirming-quality-isolated-concept-metaphor-illustration_335657-1196.jpg?size=338&ext=jpg" alt="ispezione2.png" >
</div>
<script type="text/javascript">
function sezioneispezione() {
  if(document.getElementById('ispezione1').checked) {
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: none";
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: block";
  }
  else if(document.getElementById('ispezione2').checked) {
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: none";
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: block";
  }
  else {
    document.getElementById('ispezione1img').style = document.getElementById('ispezione1img').style   "; display: none";
    document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style   "; display: none";
  }
};

sezioneispezione();
</script>

CodePudding user response：

onChange event is missing on inputs. you have to call function when there is change of checked state of input.

HTML

`

<input onChange='sezioneispezione()' type="radio" id="ispezione1" name="ispezioni" value="1" checked>
<input onChange='sezioneispezione()' type="radio" id="ispezione2" name="ispezioni" value="2">

`

CodePudding user response：

You are not setting the style value correctly. You need to set the entire style value, not one style element. Try using document.getElementById('ispezione2img').style = "display: block". If you need to keep previous style changes, try document.getElementById('ispezione2img').style = document.getElementById('ispezione2img').style "; display: block".

EDIT: as @Json Derulo said, you never call the function that sets the style, maybe my way is not necessary