已解决-错误:未定义“文档”。 [no-undef](Ruby on Rails 5.2.3)

时间:2019-07-13 13:28:13

标签: javascript ruby-on-rails ruby eslint

我正在Ruby on Rails中构建一个应用程序。个人资料视图具有用于不同部分信息的选项卡。

以下是我的标签(使用布尔玛样式):

<div class="column">
      <div class="tabs">
        <ul>
          <li class="is-active" onclick="openTab(event,'personal')"><a>Personal</a></li>
          <li><a class="tab" onclick="openTab(event,'billing')">Billing</a></li>
          <li class="tab" onclick="openTab(event,'portfolio')"><a>Portfolio</a></li>
          <li class="tab" onclick="openTab(event,'transactions')"><a>Transactions</a></li>
        </ul>
      </div>
      <div class="content">
        <div id="personal" class="content-tab">
          <p>Personal</p>
        </div>
        <div id="billing" class="content-tab" style="display:none">
          <p>Billing</p>
        </div>
        <div id="portfolio" class="content-tab" style="display:none">
          <p>Portfolio</p>
        </div>
        <div id="transactions" class="content-tab" style="display:none">
          <p>Transactions</p>
        </div>
      </div>
    </div>

这是app/assets/javascripts/application.js中的Javascript函数(用于切换标签)。

/* exported openTab */

// Function to switch tabs
function openTab(evt, tabName) {
  'use strict';
  var i, x, tablinks;
  x = document.getElementsByClassName("content-tab");
  for (i = 0; i < x.length; i += 1) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i += 1) {
    tablinks[i].className = tablinks[i].className.replace(" is-active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " is-active";
}

ESLint给我以下错误:

ERROR: 'document' is not defined. [no-undef]    x = document.getElementsByClassName("content-tab");

ERROR: 'document' is not defined. [no-undef]    tablinks = document.getElementsByClassName("tab");

ERROR: 'document' is not defined. [no-undef]    document.getElementById(tabName).style.display = "block";

我已经阅读了很多答案,但是它们似乎都在使用jQuery作为我在项目中未使用的解决方案。有什么想法可以检查DOM是否已加载并摆脱此错误吗?这可能是一个简单的解决方案,但我更像是一个后端开发人员...

0 个答案:

没有答案