首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >函数未在HTML文件中定义

函数未在HTML文件中定义
EN

Stack Overflow用户
提问于 2018-07-11 08:04:35
回答 2查看 1.5K关注 0票数 0

因此,我倾向于首先在html文件中创建脚本,然后当我知道它可以工作时,将其移动到javascript文件中。但是,现在它返回的是一个未定义的。

下面是我的html:

代码语言:javascript
复制
<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:

代码语言: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文件,因为它使用了很多其他的东西,而且它们是有效的。但是由于某些原因,这个函数是唯一不起作用的东西。

编辑:以下是完整的控制台错误:

代码语言:javascript
复制
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文件,也许你们中的一个人可以发现我找不到的地方。我还添加了****到我想审查的内容中。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-11 09:07:14

问题是范围问题。您已经在另一个以$('#chat').load('chat.ejs', function () { ...开头的函数中定义了您的函数openAction(),您的HTML无法访问该上下文。

您的超文本标记语言期望它是全局的,所以将openAction()的定义移到当前包含它的函数下面。

票数 3
EN

Stack Overflow用户

发布于 2018-07-11 08:19:56

假设我理解正确:如果当它们是单个文件的一部分时,一切都正常,但当您将脚本重新定位到单独的文件时,您得到的函数未定义,那么问题很可能是排序/排序问题。

您可以在函数调用之前加载外部脚本(这是因为脚本是解析器阻塞的,并且它将在后面的脚本块之前评估文件)

代码语言:javascript
复制
<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处理程序中(个人偏好)...

代码语言:javascript
复制
<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通常会打开控制台)。如果不是这样,您可能会在链接到文件的方式上遇到问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51275454

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档