Javascript 操作显示：无不能正常工作

Question

I'm trying to make a JS price calculator and I'm stuck on one part, where I do not find a solution for a couple of hours. I will appreciate your help.

This is what I'm trying to do:

1. Displaying part, where there are 3 product types ( <input type="radio" ). Clicking to one of them should appear with own LightBox and also hiding other parts of the <input> form.

<div>
    <h2>Basic Price</h2>
    <div id="singleSpotLB" style="display:block;">
        <?php include "/Templates/singleSpotLightBox.php"?>
    </div>
    <div id="multiSpotLB" style="display: none;">
        <?php include "/Templates/multiSpotLightBox.php"?>
    </div>
    <div id="photoSilkLB" style="display: none;">
        <?php include "/Templates/photoSilk.php"?>
    </div>

    <label for="type">Transfer Type</label><br>
    <div>
        <label for="sSpot">
            <input type="radio" name="type" id="sSpot" onclick="invisibleColors()"> SingleSpot
        </label>
        <label for="mSpot">
            <input type="radio" name="type"id="mSpot" onclick="invisibleColors()"> MultiSpot
        </label>
        <label for="pSilk">
            <input type="radio" name="type"id="pSilk" onclick="invisibleColors()"> PhotoSilk
        </label>
    </div>
</div>

2. Javascript part for hiding (by style.display = "none"; ) the divs which do not belong to the chosen product:

function invisibleColors() {
    let sSpot = document.getElementsByName("type");
    let singleSpotLB = document.getElementById("singleSpotLB");
    let multiSpotLB = document.getElementById("multiSpotLB");
    let photoSilkLB = document.getElementById("photoSilkLB");

    if (sSpot[0].checked) {
        document.getElementById('colorDiv').style.display = "none";
        singleSpotLB.style.display = "block";
        multiSpotLB.style.display = "none";
        photoSilkLB.style.display = "none";
    } else if (sSpot[1].checked) {
        document.getElementById('colorDiv').style.display = "block";
        singleSpotLB.style.display = "none";
        multiSpotLB.style.display = "block";
        photoSilkLB.style.display = "none";
    } else if (sSpot[2].checked) {
        document.getElementById('colorDiv').style.display = "none";
        singleSpotLB.style.display = "none";
        multiSpotLB.style.display = "none";
        photoSilkLB.style.display = "block";

    }
}

**The problem: When I'm testing the code it works well at the beginning but after a couple of clicks the label texts change properly, but the images just don't load.

Thanks, and I hope someone could help.

PS Content of the PHP files from where the LighBox is loaded:

<label for="type">SingleSpot</label>
    <div class="masonry-thumbs grid-container grid-3 clearfix">
        <a class="grid-item" href="http://ttransferhall.de/images/portfolio/4/1.jpg" data-lightbox="image">
            <div class="grid-inner">
                <img src="http://ttransferhall.de/images/portfolio/4/1.jpg" alt="Single Image">
                <div class="bg-overlay">
                    <div class="bg-overlay-content dark">
                        <i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
                    </div>
                    <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                </div>
            </div>
        </a>

    </div>

Here is a video of the result

Answer 1

@Alexandar Dimov Your code in Html is owner than the code in javascript. add your style in other file CSS and try again.

Answer 2

I found that there is an ajax process loaded from the template, which conflicts with the plain JS script. Thank you all for your opinions and help.