Loading in script tag from seperate php file does not work

Part of Main php-file:

    <script>
        let current_effect;

        function getRandomEffect() {
            let effect;
            do {
                effect = Math.floor(Math.random() * 3);
            } while (effect === current_effect);
            return effect;
        }

        function updateEffectContainer(effect) {
            // Construct the filename of the PHP file for the specified effect
            const filename = 'effect' + effect + '.php';

            // Load the HTML content from the PHP file using AJAX
            fetch(filename)
                .then(response => response.text())
                .then(html => {
                    // Update the effect container with the HTML content
                    document.getElementById("effect-container").innerHTML = html;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

        document.getElementById("changeEffectButton").addEventListener("click", function () {
            current_effect = getRandomEffect();
            updateEffectContainer(current_effect);
        });

        current_effect = getRandomEffect();
        updateEffectContainer(current_effect);
    </script>

effect0.php:

<p>test</p>
<script type="text/javascript">
    alert(test-alert);
</script>

The main PHP file selects an effect [0||1||2] when the site is loaded and when the “changeEffectButton” button is pressed. I can see “test” being displayed (in the case that effect0.php is chosen), but no alert window pops up.

Any idea why and how to fix it?

Thanks for every input! ^^