开发者问题收集

HTML 文件中未定义函数

2018-07-11
2595

因此,我倾向于先在 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 文件,也许你们中的一个可以发现我找不到的错误。我还将 **** 添加到我想审查的内容中​​。

2个回答

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

您的 HTML 期望它是全局的,因此请将 openAction() 的定义移到当前包含它的函数下方。

Chad Moore
2018-07-11

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

您可以在函数调用之前加载外部脚本(这有效,因为脚本是解析器阻止的,它将在紧随其后的脚本块之前评估文件)

<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 通常会打开控制台)。如果没有,您可能在链接到文件的方式上存在问题。

dgeare
2018-07-11