Java脚本中的多个功能本身可以单独工作，但不能在一个脚本中工作

Question

I created different views as I want to show an html form in 5 steps. The function for this is showStep(x) . Since I've added the functions showCameraUpload() and showContactData() , if I click on "Step2", "Step3" and so on, nothing happens... It worked perfectly before and if I put the functions I just wanted to implement in a new script they work well.

I get the following two errors:

Uncaught SyntaxError: Unexpected token ILLEGAL
Uncaught ReferenceError: show_step is not defined

What did I do wrong?

Javascript:

    <script>            
        function show_step(x) {
            switch (x) {
                case 1:
                    document.getElementById('step_content_1').style.display = "block";
                    document.getElementById('step_content_2').style.display = "none";
                    document.getElementById('step_content_3').style.display = "none";
                    document.getElementById('step_content_4').style.display = "none";
                    document.getElementById('step_content_5').style.display = "none";
                    $('#step_nav_pill_1').addClass('active');
                    $('#step_nav_pill_2').removeClass('active');
                    $('#step_nav_pill_3').removeClass('active');
                    $('#step_nav_pill_4').removeClass('active');
                    $('#step_nav_pill_5').removeClass('active');
                    break;
                case 2:
                    document.getElementById('step_content_1').style.display = "none";
                    document.getElementById('step_content_2').style.display = "block";
                    document.getElementById('step_content_3').style.display = "none";
                    document.getElementById('step_content_4').style.display = "none";
                    document.getElementById('step_content_5').style.display = "none";
                    $('#step_nav_pill_1').removeClass('active');
                    $('#step_nav_pill_2').addClass('active');
                    $('#step_nav_pill_3').removeClass('active');
                    $('#step_nav_pill_4').removeClass('active');
                    $('#step_nav_pill_5').removeClass('active');
                    break;
                case 3:
                    document.getElementById('step_content_1').style.display = "none";
                    document.getElementById('step_content_2').style.display = "none";
                    document.getElementById('step_content_3').style.display = "block";
                    document.getElementById('step_content_4').style.display = "none";
                    document.getElementById('step_content_5').style.display = "none";
                    $('#step_nav_pill_1').removeClass('active');
                    $('#step_nav_pill_2').removeClass('active');
                    $('#step_nav_pill_3').addClass('active');
                    $('#step_nav_pill_4').removeClass('active');
                    $('#step_nav_pill_5').removeClass('active');
                    break;
                case 4:
                    document.getElementById('step_content_1').style.display = "none";
                    document.getElementById('step_content_2').style.display = "none";
                    document.getElementById('step_content_3').style.display = "none";
                    document.getElementById('step_content_4').style.display = "block";
                    document.getElementById('step_content_5').style.display = "none";
                    $('#step_nav_pill_1').removeClass('active');
                    $('#step_nav_pill_2').removeClass('active');
                    $('#step_nav_pill_3').removeClass('active');
                    $('#step_nav_pill_4').addClass('active');
                    $('#step_nav_pill_5').removeClass('active');
                    break;
                case 5:
                    document.getElementById('step_content_1').style.display = "none";
                    document.getElementById('step_content_2').style.display = "none";
                    document.getElementById('step_content_3').style.display = "none";
                    document.getElementById('step_content_4').style.display = "none";
                    document.getElementById('step_content_5').style.display = "block";
                    $('#step_nav_pill_1').removeClass('active');
                    $('#step_nav_pill_2').removeClass('active');
                    $('#step_nav_pill_3').removeClass('active');
                    $('#step_nav_pill_4').removeClass('active');
                    $('#step_nav_pill_5').addClass('active');
                    break;
            }
        }
        function showCameraUpload(){
            document.getElementById('step_content_2').style.display = "block";
            document.getElementById('camera_upload').style.display = "block";
            document.getElementById('contact_data').style.display = "none";
            $('#camera_li').addClass('active');
            $('#contact_li').removeClass('active');
        }

        function showContactData(){
            document.getElementById('step_content_2').style.display = "block";
            document.getElementById('contact_data').style.display = "block";
            document.getElementById('camera_upload').style.display = "none";#
            $('#contact_li').addClass('active');
            $('#camera_li').removeClass('active');
        }
    </script>

Answer 1

I'm not sure if this is a copy and paste error but it looks like you have a strange line with echo'

function fadeOut() {
    echo'<script>
        $("p").fadeOut(3000)
    }

Instead remove the echo:

function fadeOut() {
        //echo'<script> <!-- not sure what is going on here
        $("p").fadeOut(3000)
    }

Also take a look at

document.getElementById('camera_upload').style.display = "none";#

Should be

 document.getElementById('camera_upload').style.display = "none";

take a look at google chrome dev tools, the javascript console there can help you find future errors.