Javascript document.getElementById('').style.display = "block" NOT WORKING

Question

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 class="tipologie-di-ispezione"> <h3>TIPOLOGIE DI ISPEZIONE</h3> <div class="ispezione-left"> <div class="tipologie-ispezione"> <label for="ispezione1">ISPEZIONE 1 <input onChange='sezioneispezione()' type="radio" id="ispezione1" name="ispezioni" value="1" checked> </label> </div> <div class="tipologie-ispezione"> <label for="ispezione2">ISPEZIONE 2 <input onChange='sezioneispezione()' type="radio" id="ispezione2" name="ispezioni" value="2"> </label> </div> </div> <div class="ispezione-right"> <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>

Answer 1

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">

`

Answer 2

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