Question

我将一个完全正常工作的网页复制到我网站上的一个新文件中，但是在编写了一个新函数并删除了一些HTML代码后，按下这两个按钮之一时，JS函数将无法执行。它只是抛出错误“BeginSort未定义。”

该网页应该用于对文本行进行排序。

在这里，有一些代码：

<html>
<head>
    <title>Text sorting</title>

    <style type="text/css">
        @font-face { font-family: Candles; src: url('../font/Candles.ttf'), url('../font/Candles.eot'); }

        .style1
        {
            font-family: Candles;
            font-size: 44pt;
            color: #FFFFFF;
        }
        .style2
        {
            font-family: Candles;
            font-size: 24pt;
            color: #FFFFFF;

        }
        .style3
        {
            font-family: Candles;
            font-size: 24pt;
            color: #FFFFFF;
        }
        .textareastyle
        {
            width: 450px;
            height: 310px;
        }
        html
        { 
            background: url('../backgrounds/YellowFadingBackground.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>

    <script type="text/javascript">
        function BeginSort(descend) {
            var textlines = [""];
                textlines = document.getElementById("TextBox1").value.replace(/(?:\r\n|\r|\n)/g, "\n").split("\n");
            var sortedlist = "";
            switch(descend) {
                case 0:
                    textlines.sort(function(a, b){return a-b});
                break;

                case 1:
                    textlines.sort(function(a, b){return b-a});
                break:
            }

            for(var i=0; i<textlines.length; i++) {
                if(i < (textlines.length - 1)) { sortedlist += textlines + "\n"; } else { sortedlist += textlines; }
            }

            document.getElementById("TextBox1").value = sortedlist;
        }
    </script>
</head>

<body>
    <p class="style1" align="center">Text sorter<br>
        <span class="style2">Sort the text lines in ascending or descending order!</span>
    </p>
    <p align="center" style="color: #FFFFFF; font-size: 16pt">
        Text to sort:<br>
        <textarea class="textareastyle" id="TextBox1"></textarea>
    </p>
    <p class="style2" align="center">
        <input type="button" value="Ascending" onclick="javascript:BeginSort(0);">&nbsp;<input type="button" value="Descending" onclick="javascript:BeginSort(1);">
    </p>
</body>
</html>

Answer 1

您的脚本第54行出现错误，您错过了＆＃34 ;;＆＃34; （你有一个＆＃34;：＆＃34;相反）。

正确的代码并经过测试（我没有错误）：

<html>
<head>
    <title>Text sorting</title>

    <style type="text/css">
        @font-face { font-family: Candles; src: url('../font/Candles.ttf'), url('../font/Candles.eot'); }

        .style1
        {
            font-family: Candles;
            font-size: 44pt;
            color: #FFFFFF;
        }
        .style2
        {
            font-family: Candles;
            font-size: 24pt;
            color: #FFFFFF;

        }
        .style3
        {
            font-family: Candles;
            font-size: 24pt;
            color: #FFFFFF;
        }
        .textareastyle
        {
            width: 450px;
            height: 310px;
        }
        html
        { 
            background: url('../backgrounds/YellowFadingBackground.jpg') no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>

    <script type="text/javascript">
        function BeginSort(descend) {
            var textlines = [""];
                textlines = document.getElementById("TextBox1").value.replace(/(?:\r\n|\r|\n)/g, "\n").split("\n");
            var sortedlist = "";
            switch(descend) {
                case 0:
                    textlines.sort(function(a, b){return a-b});
                break;

                case 1:
                    textlines.sort(function(a, b){return b-a});
                break;
            }

            for(var i=0; i<textlines.length; i++) {
                if(i < (textlines.length - 1)) { sortedlist += textlines + "\n"; } else { sortedlist += textlines; }
            }

            document.getElementById("TextBox1").value = sortedlist;
        }
    </script>
</head>

<body>
    <p class="style1" align="center">Text sorter<br>
        <span class="style2">Sort the text lines in ascending or descending order!</span>
    </p>
    <p align="center" style="color: #FFFFFF; font-size: 16pt">
        Text to sort:<br>
        <textarea class="textareastyle" id="TextBox1"></textarea>
    </p>
    <p class="style2" align="center">
        <input type="button" value="Ascending" onclick="javascript:BeginSort(0);">&nbsp;<input type="button" value="Descending" onclick="javascript:BeginSort(1);">
    </p>
</body>
</html>

Answer 2

除了上述答案之外，使用CDATA代码包围任何Javascript代码也是一种很好的做法：

<script type="text/javascript">
//<![CDATA[
  doSomething();
//]]>
</script>

这有助于避免像这样的错误，因为浏览器会尝试将您的Javascript解释为HTML。

网页引发错误＆＃34; <function>未定义。＆＃34; </function>

2 个答案: