非常糟糕的情况，我不得不将新代码破解成一些非常古老的代码并使其工作我必须内联一堆jQuery和一些vanilla JS。现在jQuery一切运行正常（一场胜利）但是调用后的vanilla JS给出了
未捕获的ReferenceError：未定义重置
未捕获的ReferenceError：未定义checkAnswers
我尝试从控制台执行jq.reset（），但仍未定义。
这是内联JS
<script type='text/javascript'>
var jq = jQuery.noConflict(true);
(function ($) {
$(document).ready(function () {
/* Drag and Drop */
//var container = document.getElementById("health");
//var content = container.innerHTML;
var correctAnswers = [
"fish and seafood",
"meat and small goods",
"poultry and game",
"dairy and egg-based foods",
"wet dishes, soups, stock and sauces",
"fruits including rock melon, watermelon, blueberries and fruit salad",
"pre-made salads",
"pate and soft cheeses",
"ice-cream",
"cooked rice and pasta"
];
var answers = [];
function checkAnswers() {
correctAnswers.sort();
answers.sort();
var result = true;
if (correctAnswers.length !== answers.length) {
result = false;
$("#incomplete").show();
} else if (correctAnswers.length == answers.length) {
for (var i = correctAnswers.length; i--; ) {
if (correctAnswers[i] !== answers[i]) {
result = false;
$("#incomplete").hide();
$("#incorrect").show();
}
}
}
if (result) {
$("#incorrect").hide();
$("#incomplete").hide();
$("#correct").show();
}
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
answers.push(data);
console.log(correctAnswers);
console.log(answers);
ev.target.appendChild(document.getElementById(data));
}
function dropOut(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var index = answers.indexOf(data);
answers.splice(index, 1);
console.log(correctAnswers);
console.log(answers);
ev.target.appendChild(document.getElementById(data));
}
function reset() {
var container = document.getElementById("health");
container.innerHTML = html;
answers = [];
document.getElementById(".dropable-area").reset();
}
if ($('#health').length){
var html;
window.onload = function() {
html = document.getElementById("health").innerHTML;
};
}
$("#health").on("click",".correctKey",function() {
$("#health").find(".dropbox").each(function(index) {
$(this).text(correctAnswers[index]);
answers = correctAnswers;
});
});
});
}(jq));
</script>
它被调用的HTML，带有reset（）和checkAnswers（）的按钮都失败了，我想把它剥离出来并把它放在一个单独的脚本中，但它也有jQuery需要被包装来保护它文件中也使用旧版本的版本。
<div class="container drag" id="health">
<div class="row dropable-area">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class="col-sm-6">
<div class="dropbox panel panel-default" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
</div>
</div>
</div>
<div class="row answers-area">
<div class="col-sm-12">
<div class="panel panel-default answers">
<div class="panel-body" ondrop="dropOut(event)">
<div class="row">
<div class="col-md-4">
<p class="answer" draggable="true" ondragstart="drag(event)" id="fish and seafood">fish and seafood</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="meat and small goods">meat and small goods</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="packets of dry food">packets of dry food</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="poultry and game">poultry and game</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="wet dishes, soups, stock and sauces">wet dishes, soups, stock and sauces</p>
</div>
<div class="col-md-4">
<p class="answer" draggable="true" ondragstart="drag(event)" id="dairy and egg-based foods">dairy and egg-based foods</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="pre-made salads">pre-made salads</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="raw vegetables">raw vegetables</p>
<p draggable="true" ondragstart="drag(event)" id="pate and soft cheeses">pate and soft cheeses</p>
</div>
<div class="col-md-4">
<p class="answer" draggable="true" ondragstart="drag(event)" id="uncooked rice and pasta">uncooked rice and pasta</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="ice-cream">ice-cream</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="cooked rice and pasta">cooked rice and pasta</p>
<p class="answer" draggable="true" ondragstart="drag(event)" id="fruits including rock melon, watermelon, blueberries and fruit salad">fruits including rock melon, watermelon, blueberries and fruit salad</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row bottom-area">
<div class="col-md-12">
<div class="buttons">
<button class="btn btn-default" onclick="checkAnswers()">Check Answers</button>
<button class="btn btn-default correctKey">Answer Key</button>
<button class="btn btn-default" onclick="reset()">Reset</button>
</div>
<div class="messages">
<div class="alert alert-success" id="correct" style="display:none;">
<p><strong>Well done!</strong> You successfully identified the hazards!</p>
</div>
<div class="alert alert-warning" id="incomplete" style="display:none;">
<p><strong>Warning!</strong> You havn't finished identifying all the hazards.</p>
</div>
<div class="alert alert-danger" id="incorrect" style="display:none;">
<p><strong>Oh snap!</strong> It doesn't look like you have the correct hazards identified!</p>
</div>
</div>
</div>
</div>