Question

我创建了不同的视图，因为我希望以5个步骤显示html表单。这个功能是showStep(x)。由于我添加了函数showCameraUpload()和showContactData()，如果我点击“Step2”，“Step3”等等，没有任何反应......它之前完美无缺，如果我放置函数我只是想在一个新的脚本中实现它们运行良好。

我收到以下两个错误：

未捕获的SyntaxError：意外的令牌ILLEGAL
未捕获的ReferenceError：未定义show_step

我做错了什么？

使用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

我不确定这是否是复制和粘贴错误，但看起来你有一个奇怪的回显线'

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

取而代之的是删除回声：

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

另外看看

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

应该是

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

看看google chrome dev工具，javascript控制台可以帮助你找到未来的错误。

javascript中的多个函数单独工作，但不能在一个脚本中工作

1 个答案: