Javascript getElementsByClassName() 无法找到正确的类-6ren

Javascript getElementsByClassName() 无法找到正确的类

转载作者：行者123 更新时间：2023-12-01 02:31:54

26

4

我一直在尝试使用以下指南进行简单的表单设置:https://www.w3schools.com/howto/howto_js_form_steps.asp.

我在表单内有三个带有 class="tab"的 div，我试图使用 javascript 使其可见/不可见:

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
}

这应该显示第 n 个选项卡，但加载页面时没有选项卡可见，此外，当页面加载且 n = 0 时，两个按钮(上一个和下一个，请参阅下面的代码)都是可见的；我尝试使用以下方法使其适用于不同的设置:

<script> // code goes here </script>

或者简单地包含一个单独的.js文件，将脚本部分嵌入到head、body、html甚至表单中都没有成功。一直以来，我都可以在同一脚本部分的开头运行简单的 js 命令，例如:alert("test");。

我正在使用预制 Bitnami LAMP 堆栈的 Linux 计算机上运行该页面。

<!Doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/login.css" />
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/new_user.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script>

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {

    // This function will display the specified tab of the form...
    var x = document.getElementsByClassName("tab");
    x[n].style.display = "block";

    //... and fix the Previous/Next buttons:
    if (n == 0) {
        document.getElementById("prevBtn").style.display = "none";
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Submit";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
    //... and run a function that will display the correct step indicator:
    fixStepIndicator(n)
}

function nextPrev(n) {

    // This function should figure out which tab to display
    var x = document.getElementsByClassName("tab");

    // Hide the current tab:
    x[currentTab].style.display = "none";
    // Increase or decrease the current tab by 1:
    currentTab = currentTab + n;
    // if you have reached the end of the form... :
    if (currentTab >= x.length) {
    //...the form gets submitted:
        document.getElementById("register_form").submit();
        return false;
    }
    // Otherwise, display the correct tab:
    showTab(currentTab);
}

// This manages step indicators.
function fixStepIndicator(n) {
    // This function removes the "active" class of all steps...
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
    }
    //... and adds the "active" class to the current step:
    x[n].className += " active";
}

</script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="background">
    <main class="wrapper">
        <div id="parent">
            <form id="register_form" action="" method="post">
                <h1>New user:</h1>
                <div style="text-align:center;">
                    <span class="step"></span>
                    <span class="step"></span>
                    <span class="step"></span>
                </div>
                <div style="float:right; padding: 15px;">
                    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
                </div>
                <div style="float:left; padding: 15px;">
                    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                </div>
                <div class="tab">
                        //content
                </div>

                <div class="tab">
                        //content
                </div>

                <div class="tab">
                       //content
                    </div>
                </div>
            </form>
        </div>
    </main>

</body>

</html>

选项卡类本身看起来像并且默认情况下应该是不可见的:

.tab {
  display: none;
}

我想知道为什么表单中的选项卡似乎不受showTab函数的影响。我已经研究这个问题几个小时了，但我完全一无所知，任何帮助将不胜感激!

亲切的问候。

最佳答案

代码的第一个问题是 JavaScript 在页面加载之前运行。因此它不会起作用。在调用函数之前，您必须等待页面加载。有多种方法可以实现这一点，通常使用库。

在纯 JavaScript 中，您可以监听文档上的事件 DOMContentLoaded，如下所示:

<script>
  var currentTab = 0; // Current tab is set to be the first tab (0)

  function showTab(n) {
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    // this code will be running when the document is loaded
    showTab(currentTab); // Display the current tab

  });
</script>

关于Javascript getElementsByClassName() 无法找到正确的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48256284/

26

4

0

文章推荐： javascript - 如何使用 Angular5 声明服务

文章推荐： javascript - 测试数组中的数字

文章推荐： python - 使用按日期分组将字典列表转换为字典列表

java - 资源文件由 Gradle 找到，但不由 Eclipse 找到
这个问题在这里已经有了答案: Different ways of loading a file as an InputStream (6 个答案) 关闭 8 年前。在我的 gradle java
ruby-on-rails - Ruby:使用 class_eval 定义常量只能通过 const_get 找到，但不能直接通过::lookup 找到
给定一个 User 类: class User end 我想使用 .class_eval 定义一个新常量.所以: User.class_eval { AVOCADO = 'fruit' } 如果我尝试
jQuery 找到 self
这可能听起来很奇怪，但我正在开发一个需要查找 div 内的元素或 div 本身的插件。脚本根据用户选择查找元素，但内容(包括标记)是可变的。因此脚本将按如下方式查找元素: $('.block').f
c - 找到的输出？
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
c++ - 对的多重集，找到
我需要在按我自己的函数排序的对的多集中查找并删除一个值。显然， .find 总是将迭代器返回到末尾，而不是返回到搜索到的值。有小费吗？这是函数: struct cmp { bool operato
c++ - 迭代，找到
求助!我将如何通过遍历查看字符并计算有效字符出现之前的下划线数量来查找和删除前导下划线。以及从字符串末尾向后迭代以查找任何尾随下划线。我可以使用下面的方法来删除下划线，但是如何迭代才能找到下划线。
jQuery - xpath 找到？
如果你在 $(xml) 中有下面的 xml，你会变得懒惰: $(xml).find("animal").find("dog").find("beagle").text() 在 jQuery 中是否有类
macos - 找到 4 个文件的交集
你如何找到4个文件的交集？我用了grep -Fx -f 1.txt 2.txt 3.txt 4.txt ，但它似乎只适用于 2 个文件。同样comm -12 1.txt 2.txt无法扩展为 4 个
aruco - 找到 aruco 标记的中心
我已经完成了标记的姿势估计并获得了 rvec 和 tvec 值。我不知道如何找到它的中心，因为我需要绘制一个需要中心值的圆柱体。我该怎么做？最佳答案标记的 tvec 是标记从原点的平移 (x,y
list - 找到 2 个双向链表的交集
我有一个任务，我需要找到 2 个单链接(单对单)列表的交集。我还必须为 2 个双向链接(双重 vs 双重)列表执行此操作: 对于单链表，我使用 mergeSort() 对两个列表进行排序，然后逐项比较
r - 找到 R 中最大的特征值
我是 R 的新手，我有一个 100x100 的方阵。我想找到这个矩阵的最大特征值。我试过了 is.indefinite(x) 但是它写 is.indefinite(x) : argument x is
javascript - 找到 svg 路径元素的中心
您好，我是 svg 和 JavaScript 的新手，当鼠标位于 svg 上方时，我试图使一些 svg 元素弹出(通过缩放)，反之亦然，当鼠标离开 svg 元素时。我已经能够通过使用转换使 svg
scala - ;预期但<将您最喜欢的关键字放在这里> 找到
我正在尝试为 scala 项目编写一个类，但在多个地方使用 class、def、while 等关键字出现此错误。它发生在这样的地方: var continue = true while (conti
python - 找到 Pandas 时间序列之间的相关性
我有两个 pandas 数据框，它们只取自一列并将日期列设置为索引，所以现在我有两个 Series。我需要找到这些系列的相关性。这里有几行来自dfd: index change 2018-
vagrant - 找到 Vagrantfile 文件夹
我正在尝试调整我的 Vagrantfile，因此如果它丢失，它会自动在项目根目录中创建一个文件夹。创建文件夹没问题，但我无法找到创建该文件夹的位置。我发现此信息可在 Vagrant::Environ
jquery - 找到
的位置
我正在尝试在 jquery 中找到 Test3 的位置，请有人引导我走上正确的道路。我需要jquery来显示5 Test7 Test2 Test6 Test5 Test3 Test8 谢谢最佳
jquery - 找到:contains?的图像src
大家早上好我有一个像这样的图像列表: 使用 jQuery 如何查找 ul#preload 中包含特定字符串(例如“green”)的所有图像 src 类似... var new_src = j
excel - 找到 Excel 工作表中最后使用的行单元格
我正在开发一个修改 Excel 文件的应用程序。如何找到任意行中最后使用的单元格？示例:行号 => 5 中最后使用的单元格最佳答案要找到一行中的最后一个单元格，您需要 Range 的 End
javascript - 找到 JWT 后如何导航一次？
我刚刚陷入 react native ，需要一些帮助才能在找到 token 时导航到 protected 屏幕。我应该在哪里寻找应用程序加载时的 token ？如何在不多次调用导航的情况下导航用户一次
javascript - 找到 JQuery 元素但不可点击
非常奇怪...此页面是 protected 内容还是我不知道的内容？我尝试单击下一页 anchor 。参见this page first. 我试图用这个来抓取元素 var buttonNext =

首页

博学

6Ren·AI

商城

Javascript getElementsByClassName() 无法找到正确的类