2013-05-14 3 views
0

У меня небольшая проблема, включая файл javascript. У меня есть следующий код на моей странице, и я хочу переместить его в отдельный файл, называемый cart.js. Проблема в том, что всякий раз, когда я переношу весь свой сценарий в этот файл, он перестает работать на моей странице. Я попробовал завернуть весь блок кода в документе, но это не сработало. Я потерял, как включить это.Включая javascript-файл?

EDIT: Я нашел свою ошибку благодаря совету взглянуть на консоль. Оказывается, оставляя вызов jquery в cart.js, вызывает проблему.

current_fin = "none"; 
current_mat = "Pine"; 
current_col = "Red"; 
current_size = "36"; 
jQuery(document).ready(function($) { 
    $("#dropdownthree").hide(); 
}); 

// Pass the current selection into a variable to use. 
function getMaterial() {// function checks material and if plastic hides/shows boxes 
    var mat = document.getElementById("dropdownone"); 
    current_mat = mat.options[mat.selectedIndex].text; 
    if (current_mat == "Plastic") { 
    var col = document.getElementById("dropdownthree"); 
    current_fin = col.options[col.selectedIndex].text; 
    $("#dropdowntwo").hide(); 
    $("#dropdownthree").show(); 
    } else { 
    var fin = document.getElementById("dropdowntwo"); 
    current_fin = fin.options[fin.selectedIndex].text; 
    $("#dropdownthree").hide(); 
    $("#dropdowntwo").show(); 
    } 
    $.post('php/productajaxtemp.php', { 
    ourMaterial: current_mat, 
    ourFinish: current_fin, 
    ourSize: current_size 
    }, function (data) { 
    $("#price").html(data).show(); 
    }); 
} 

function getFinish() { 
    var fin = document.getElementById("dropdowntwo"); 
    current_fin = fin.options[fin.selectedIndex].text; 
    $.post('php/productajaxtemp.php', { 
    ourMaterial: current_mat, 
    ourFinish: current_fin, 
    ourSize: current_size 
    }, function (data) { 
    $("#price").html(data).show(); 
    }); 
} 

function getColor() { 
    var col = document.getElementById("dropdownthree"); 
    current_col = col.options[col.selectedIndex].text; 
    $.post('php/productajaxtemp.php', { 
    ourMaterial: current_mat, 
    ourFinish: current_col, 
    ourSize: current_size 
    }, function (data) { 
    $("#price").html(data).show(); 
    }); 
} 

function getSize() { 
    var sz = document.getElementById("dropdownsize"); 
    current_size = sz.options[sz.selectedIndex].text; 
    $.post('php/productajaxtemp.php', { 
    ourMaterial: current_mat, 
    ourFinish: current_col, 
    ourSize: current_size 
    }, function (data) { 
    $("#price").html(data).show(); 
    }); 
    getMaterial(); 
} 

Ассоциированный HTML является

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="js/cart.js"></script> 

<form action="cart.php" id="form" method="POST"> 
    <select name="size" id="dropdownsize" onchange="getSize()"> 
    <option>36</option> 
    <option>48</option> 
    <option>60</option> 
    <option>72</option> 
    </select> 
    <select name="material" id="dropdownone" onchange="getMaterial()"> 
    <option>Pine</option> 
    <option>Oak</option> 
    <option>Walnut</option> 
    <option>Plastic</option> 
    </select> 
    <select name="finish" id="dropdowntwo" onchange="getFinish()"> 
    <option>None</option> 
    <option>Finished</option> 
    </select> 
    <select name="color" id="dropdownthree" onchange="getColor()"> 
    <option>Painted Red</option> 
    <option>Painted Green</option> 
    <option>Painted Blue</option> 
    <option>Painted yellow</option> 
    <option>Painted white</option> 
    <option>Primer white</option> 
    </select> 
    <input type="submit" value="Add To Cart"> 
</form> 
+2

Вы проверили, нет ли ошибки (в консоли) и что сценарий выполнен (добавьте console.log ('hi')) в конце? –

+0

- это ваш .js-файл, расположенный в одном каталоге ниже в папке js? –

+0

Я понял это, посмотрев на консоль, получилось: