HTML 文件中未定义函数
因此,我倾向于先在 html 文件中编写脚本,然后在确定它可以正常工作时将其移动到 javascript 文件中...但是,现在它返回了未定义。
这是我的 html:
<div class="tab">
<button class="tablinks" onclick="openAction(event, 'battle-wrapper')" id="defaultOpen">Battle</button>
<button class="tablinks" onclick="openAction(event, 'tradeskill-wrapper')">Trade Skills</button>
<button class="tablinks" onclick="openAction(event, 'crafting-wrapper')">Crafting</button>
</div>
这是我的 javascript:
var storedUsername;
// Port Connect Cht
if (window.location.hostname == '****' || window.location.hostname == '****') {
var port = 443;
} else {
var port = 8080;
}
var connected = false;
var socket = io.connect(window.location.hostname + ':' + port, { 'connect timeout': 5000 });
// Connection Successful
socket.on('connect', function () {
connected = true;
// socket.emit('login');
});
socket.on('disconnect', function () {
connected = false;
});
$(document).on('click', 'button#btn-logout', function () {
socket.emit('logout');
});
socket.on('not logged', function (destination) {
window.location.href = destination;
});
socket.on('start up', function (dataObj) {
});
$(document).ready(function (dataObj) {
$('#battle-wrapper').on('click', 'button#battlebutton', function (event) {
event.preventDefault();
socket.emit('fight mob', $('#monster').val());
});
socket.on('mob test', function (dataObj) {
if (dataObj.userStats) {
$('#player-stats').html(dataObj.userStats);
$('#mob-stats').html(dataObj.mobStats);
$('#fight-results').html(dataObj.results);
$('span#action-counter').html(dataObj.autos);
$('#title').html(dataObj.autos + ' - KoG');
} else {
$('#title').html('AUTOS EXPIRED - KoG');
}
});
$('#generalChat').click(function () {
$('#chat').toggle();
});
var current = '#actions';
// Actions Button Handler
$('#btn-actions').click(function () {
if (current != '#actions') {
$(current).hide();
current = '#actions';
$(current).show();
}
});
// Profile button handler
$('#btn-profile').click(function () {
if (current != '#profile') {
$(current).hide();
current = '#profile';
$(current).show();
}
});
// Kingom button handler
$('#btn-kingdom').click(function () {
if (current != '#kingodm-page') {
$(current).hide();
current = '#kingdom-page';
$(current).show();
}
});
// inventory button handler
$('#btn-inventory').click(function () {
if (current != '#inventory') {
$(current).hide();
current = '#inventory';
$(current).show();
}
});
// allicne button handler
$('#btn-alliance').click(function () {
if (current != '#alliance') {
$(current).hide();
current = '#alliance';
$(current).show();
}
});
// mail button handler
$('#btn-mail').click(function () {
if (current != '#mail') {
$(current).hide();
current = '#mail';
$(current).show();
}
});
// Statistics Handler
$('#statistic-row').load('statistics.ejs', function () {
socket.on('time', function (data) {
$('#time').html(data);
});
socket.on('users online', function (usersConnected) {
$('#online').html(usersConnected);
});
});
});
// Chat Handler
$('#chat').load('chat.ejs', function () {
$('#chat-form').submit(function (event) {
event.preventDefault();
var msg = $('#m').val();
// Clears chat field
$('#m').val('');
// Discards message if not connected
if (!connected || msg == '') {
return false;
}
socket.emit('chat', msg, storedUsername);
});
// Populat chat
socket.on('message', function (message, username) {
storedUsername = username || storedUsername;
$('#messages').prepend($('<li>').html(message));
});
// Get the element with id="defaultOpen" and click on it
document.getElementById('defaultOpen').click();
function openAction(evt, actionName) {
// Declare all variables
var i; var tabcontent; var tablinks;
console.log(actionName);
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName('tabcontent');
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none';
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName('tablinks');
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', '');
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(actionName).style.display = 'block';
evt.currentTarget.className += ' active';
}
});
**相关函数在末尾 现在我知道脚本本身在 html 文件中可以正常工作。我正确地包含了我的 JS 文件,因为它使用了很多其他东西,而且它们都可以正常工作。但出于某种原因,这个函数是唯一不起作用的。
编辑:这是完整的控制台错误:
Uncaught ReferenceError: openAction is not defined
at HTMLButtonElement.onclick (game:66)
at HTMLDivElement.<anonymous> (game.js:152)
at HTMLDivElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at Object.<anonymous> (jquery.min.js:4)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)
编辑:我添加了整个 JS 文件,也许你们中的一个可以发现我找不到的错误。我还将
****
添加到我想审查的内容中​​。
问题在于范围。您已在另一个以
$('#chat').load('chat.ejs', function () { ...
开头的函数内定义了函数
openAction()
,您的 HTML 无法访问该上下文。
您的 HTML 期望它是全局的,因此请将
openAction()
的定义移到当前包含它的函数下方。
如果我理解正确:如果当它们作为单个文件的一部分时一切都正常,但是当您将脚本重新定位到单独的文件时,您得到未定义的函数,那么问题可能是排序/排序问题。
您可以在函数调用之前加载外部脚本(这有效,因为脚本是解析器阻止的,它将在紧随其后的脚本块之前评估文件)
<div class="tab">
<button class="tablinks" onclick="openAction(event, 'battle-wrapper')" id="defaultOpen">Battle</button>
<button class="tablinks" onclick="openAction(event, 'tradeskill-wrapper')">Trade Skills</button>
<button class="tablinks" onclick="openAction(event, 'crafting-wrapper')">Crafting</button>
</div>
<script src='some_external_script_containing_openAction.js'></script>
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById('defaultOpen').click();
</script>
或者您可以将触发代码放在 onload 处理程序中(个人偏好)...
<div class="tab">
<button class="tablinks" onclick="openAction(event, 'battle-wrapper')" id="defaultOpen">Battle</button>
<button class="tablinks" onclick="openAction(event, 'tradeskill-wrapper')">Trade Skills</button>
<button class="tablinks" onclick="openAction(event, 'crafting-wrapper')">Crafting</button>
</div>
<script>
//wait for all resources to load.
window.addEventListener('load', function(e){
// Get the element with id="defaultOpen" and click on it
document.getElementById('defaultOpen').click();
});
</script>
<script src='some_external_script_containing_openAction.js'></script>
但我没有足够的信息来诊断您的问题。如果这两种解决方案都与您的情况都不相关,请在您的脚本文件中放置一个
console.log('here')
,并确保它在您的页面中触发(F12 通常会打开控制台)。如果没有,您可能在链接到文件的方式上存在问题。