Question

所以我有代码，我正在尝试从我的jsfiddle实现到一个实际工作的网站/迷你应用程序。我已经注册了域名并通过siteground获得了托管，我甚至通过ftp上传了这些文件，所以我几乎就在那里......

但我认为我的HTML代码或JS代码有问题，或者我如何将我的JS代码实现到我的HTML代码中，因为所有HTML和CSS元素都存在，但缺少javascript功能。

这是我的小提琴：

^^点击“开始”以查看实际显示内容（这在实际网站中无效，这让我相信我的JS文件存在问题 - 是否与代码相关或者是否因为我集成了文件不正确）（或者甚至可能错误地上传到服务器？）......

以下是实际网站：

http://www.abveaspirations.com/index.html

这是我通过FTP上传到服务器的HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="script.js"></script>
    </head>

<body>
    <div id='frame'>
      <div id='display'>
        <h1 id='output'></h1>
      </div>
    </div>
    <div class="spacer">
    </div>
    <div id="main"> <!-- 11main -->
        <h1 id='consoleTitle'>Control Board</h1>
        <h5 id='consoleSub'><i>Double-click on an entry to remove. And add entries to your heart's desire...</i></h5>
        <div id="controlbox"> <!-- @@controlbox --> 
            <div id="controlpanel"></div>
            <div class="spacer"></div>    
                <div id="formula">    <!--formula -->
                    <form id="frm" method="post">
                        <input id="txt" type="text" placeholder="Insert your own entry here..." name="text">            
                        <input id='submitBtn' type="submit" value="Start">
                        <input id='stop' type="button" value="Stop">            
                            <select id="load1">
                                <option id='pre0' value="Preset 0">Preset 0</option>
                                <option id='pre1' value="Preset 1">Preset 1</option>
                                <option id='pre2' value="Preset 2">Preset 2</option>   
                            </select>
                                        <!-- These are for buttons as opposed to OPTION...
                                        <input id="load" type="button" value="Preset 1">
                                        <input id="load2" type="button" value="Preset 2"-->
                    </form>
                </div>          <!-- formula -->   
        </div>  <!-- @@controlbox -->
    </div>        <!-- 11main -->
</body>

我的JS代码，也通过FTP上传到服务器（我没有附带随附的CSS文件，但如果这样会有所帮助，我可以提供）：

$(document).ready(function () {
    var txtBox = $('#txt');
    var frm = $('#frm');
    var output = $('#output');
    var subBtn = $('#submitBtn');
    var stopBtn = $('#stop');
    var loadBtn = $('#load');
    var loadBtn2 = $('#load2');
    var loadBtnA = $('#load1');
    var pre0 = $('#pre0');
    var pre1 = $('#pre1');
    var pre2 = $('#pre2');
    var txt = $('#display');
    var preset1 = ["1", "2", "3"];
    var preset2 = ["a", "b", "c"];
    var container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
    var console = $('#controlpanel');
    var oldHandle;

    function loadPreset0() {
        container = [];
        console.empty();
        container = ["What we do in life echoes in all eternity.", "Find your purpose and give it life.", "When you work your hardest, the world opens up to you."];
        updateConsole();
    };

function loadPreset1() {
    container = [];
    console.empty();
    container = preset1;
    updateConsole();
};

function loadPreset2() {
    container = [];
    console.empty();
    container = preset2;
    updateConsole();
};



$(pre0).data('onselect', function() {
    loadPreset0();
});    

$(pre1).data('onselect', function() {
    loadPreset1();
});

$(pre2).data('onselect', function() {
    loadPreset2();
});

$(document).on('change', 'select', function(e) {
    var selected = $(this).find('option:selected'),
        handler = selected.data('onselect');
    if ( typeof handler == 'function' ) {
        handler.call(selected, e);
    }
});


function updateConsole() {
    for (var z = 0; z < container.length; z++) {
        var resultC = container[z];
        var $initialEntry = $('<p>' + '- ' + resultC + '</p>');
        console.append($initialEntry);
     };
};

updateConsole();


frm.submit(function (event) {
    event.preventDefault();

    if (txtBox.val() != '') {
        var result = txtBox.val();
        container.push(result);                         //1.

        var resultB = container[container.length-1];
        var $entry = $('<p>' + '- ' + resultB + '</p>');
        console.append($entry);                         //2.
    }

    var options = {
        duration: 5000,
        rearrangeDuration: 1000,
        effect: 'random',
        centered: true
    };

    stopTextualizer();
    txt.textualizer(container, options);
    txt.textualizer('start');
    txtBox.val('');
}); 



$("#controlbox").on('dblclick', 'p', function() {
    var $entry = $(this);
    container.splice($entry.index(), 1);
    $entry.remove();
});

function stopTextualizer(){
    txt.textualizer('stop');
    txt.textualizer('destroy');
}

$(stopBtn).click(function() {
    stopTextualizer();
});


});

任何帮助将不胜感激。我想我只是不确定在通过ftp将html文件上传到服务器后该怎么做。或者也许我正确地做到了这一点，我的代码出现了问题，我忽略了。基本上我迷路了。请帮忙！

Answer 1

你忘了加载jQuery。在加载<script src="../path-to-jquery/jquery.js"></script>脚本之前，请确保使用script.js。

另外，我注意到您正在head标记中加载脚本。这是不好的做法，在</body>之前加载它们。

Answer 2

我相信你的网站缺少jQuery。将其添加到代码顶部以热链接到google的jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

试图让网站工作的问题 - 我的HTML代码可能出现问题？

2 个答案: