我使用 document.getelementsbyclassname 是否错误?

2024-04-02

当我输入文本框的值必须是“”并且颜色必须是红色。我必须对三个文本框使用相同的函数。当我使用 document.getelementsbyclassname() 时,我的函数将无法工作。难道我做错了什么?

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>

    <title>DOMoef01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript">

        function roodVerdwijn(){
            document.getElementsByClassName('text1').value="";
            document.getElementsByClassName('text1').style.color = "Red";
            document.getElementsByClassName('text1').style.background = "White";
        }

        function gedaan(){
            document.getElementByClassName('text1').style.color = "Black";
            document.getElementByClassName('text1').style.background =   "Gray";
        }


    </script>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">persoonlijke gegevens</td>
        </tr>
        <tr>
            <td>voornaam</td>
            <td><input type="text" value="voornaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td>achternaam</td>
            <td><input type="text" value="achternaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td>adres</td>
            <td><input type="text" value="adres" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
        </tr>
        <tr>
            <td><input type="button" value="verzenden"   onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
            <td><input type="button" value="alles wissen"></td>
        </tr>
    </table>
</body>
</html>

我尝试用这段代码修复它,但它仍然不起作用:

function roodVerdwijn(){
            var elements = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
                elements.value="";
                elements.style.color = "Red";
                elements.style.background = "White";
            }
        }

        function gedaan(){
            var elements2 = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
            elements2.style.color = "Black";
            elements2.style.background = "Gray";
            }
        }

这有点帮助,但是当我专注于一个文本框时,所有 3 个文本框的值都是“”。我只想专注于一个文本框。这就是我改变的:

function roodVerdwijn(){
            var elements = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
                elements[i].value="";
                elements[i].style.color = "Red";
                elements[i].style.background = "White";
            }
        }

        function gedaan(){
            var elements2 = document.getElementsByClassName('text1');
            for(var i = 0 ; i<elements.length;i++){
            elements2[i].style.color = "Black";
            elements2[i].style.background = "Gray";
            }
        }

按类名获取元素返回元素数组。您必须循环每个元素,或者如果您确定您要查找的类只有一个元素,请使用 [0]。

document.getElementsByClassName('text1')[0].value ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我使用 document.getelementsbyclassname 是否错误? 的相关文章

  • PHP函数返回值到html标签

    我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中 我有一个名为 login 的函数 用于验证密码是否正确 不正确
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • XPATH 查询、HtmlAgilityPack 和提取文本

    我一直在尝试从名为 tim new 的类中提取链接 我也得到了解决方案 给出了解决方案 片段和必要的信息here https stackoverflow com questions 2982862 extracting a table ro
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • KeyboardEvent.keyCode 已弃用。这在实践中意味着什么?

    根据 MDN 我们绝对应该not正在使用 keyCode财产 它已被弃用 https developer mozilla org en US docs Web API KeyboardEvent keyCode https develope
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 从多维无穷大数组中删除数组元素

    我想删除一个特定元素 例如 我想删除元素id 76在下面的数组中 而且 数组可以无限地组合在一起 这里的问题是我无法刷新页面 因为我使用 Vue js 进行即时操作 如果我能做到这一点 我的下一个问题可能是如何在我现在想要的地方添加一个元素
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • MYSQL 按喜欢/不喜欢和受欢迎程度排序

    我有评论表 其中包括喜欢和不喜欢的内容 现在我在正确的顺序上遇到了问题 实际上 我的系统在顶部显示了最多点赞的评论 我正在 youtube 上寻找类似系统的东西 这意味着 100like 100dislikes 的评论的顺序高于 1 1 我
  • html,将链接显示为普通文本

    我想知道您是否可以将链接显示为普通文本 a href target self img src width 121 height 20 alt div style font size 12px display block font color
  • span 和 iframe 正文中的宽度(以像素为单位)

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs
  • 如何在 SVG 元素上使用箭头标记?

    我需要在 d3 js 中创建一个箭头 但我找到的只是带有节点图的示例 我需要的是简单地制作一个从 A 点到 B 点的箭头 我尝试实现以下示例中的部分代码 http bl ocks org 1153292 http bl ocks org 1
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐

  • 命令行中转换命令出错

    我有一个 bash shell 脚本 如下所示 bin bash SIZES 512 1024 2048 for i in SIZES do SIZE SIZES i echo SIZE first resize original imag
  • 我需要 SQLBulkcopy 的进度条

    我的应用程序需要进度条 我正在通过文本文件将数据上传到 SQL Server 但这需要很多时间 而且我也使用了后台工作程序 但这不能正常工作 所以我只需要知道是否有任何方法可以将进度条与 SQL Bulk Copy 一起使用它告诉我插入了
  • Python:如何让程序等待函数或方法完成

    程序经常需要等待函数完成其工作 有时恰恰相反 主程序不需要等待 我举了一个简单的例子 有四个按钮 单击每个将调用相同的calculate 函数 唯一的区别是函数的调用方式 直接打电话 使用队列 每个线程完成后将结果放入队列中 然后您只需读取
  • 我必须使用 SVN API 或库访问/提交/更新 WPF 应用程序中的 SVN 存储库 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 任何可用于从 net 应用程序访问 SVN 的好库 使用 C 到目前为止我发现的唯一 3 个我会尝试的
  • 如何使用 easy_install 安装 django 旧版本?

    我刚刚因为 django 1 3 破坏了我的环境 我的网站都无法运行 因此 我决定使用 virtualenv 来设置不同 python 版本以及 django 的虚拟环境 但是 似乎如果我下载软件包并使用 sudo python setup
  • 阵列部件访问

    我试图更好地理解数组 请原谅我的基本问题 因为我三周前刚刚打开我的第一本 php 书 我知道您可以使用 foreach 或 for 循环 检索键 值对 如下所示 stockprices array Google gt 800 Apple g
  • II 错误:应用程序代码隐藏=“Global.asax.cs”继承=“nadeem.MvcApplication”

    我正在尝试部署我的网络项目 但不断收到此错误 Line 1 我看了这个帖子 解析器错误 应用程序中的服务器错误 https stackoverflow com questions 11596352 line 1 application co
  • MySQL Regexp 是否支持 Unicode 匹配

    有谁知道Mysql的正则表达式是否支持unicode 我一直在做一些研究 大多数博客等似乎都表明存在问题或不受支持 我想知道是否最好使用 LIKE 进行 unicode 模式匹配 使用 regexp 进行 ASCII 增强模式匹配 我喜欢能
  • 具有非正则截距项的 Scikit-learn 岭回归

    scikit learn 岭回归是否在正则化项中包含截距系数 如果是 是否有办法在不正则化截距的情况下运行岭回归 假设我拟合岭回归 from sklearn import linear model mymodel linear model
  • RxJS forkJoin 未完成

    当我订阅 getAllSubModules 时 forkJoin 会毫无错误地执行所有这些可观察值 但不会完成 我知道 forkJoin 仅在其所有可观察值完成后才完成 但作为证据 我在控制台中看到 3 次 这确认一切都成功 因此所有可观察
  • jqGrid 过滤器工具栏仅显示单列的搜索运算符选择器

    我有包含许多列的 jqGrid 表 使用过滤器工具栏在网格中进行搜索 对于大多数人来说 搜索只是简单的默认运算符 对于一个日期时间列 我需要不同类型的运算符和日期选择器选择器 我已经添加了dataInit日期选择器初始化为searchopt
  • 如何将最后 N 次提交压缩在一起?

    如何将最后 N 次提交压缩为一次提交 你可以很容易地做到这一点 无需git rebase or git merge squash 在此示例中 我们将压缩最后 3 个提交 如果您想从头开始编写新的提交消息 这就足够了 git reset so
  • java/oops 中静态变量和动态变量有什么区别?

    请有人告诉我 oops 或 java 中 静态变量 和 普通变量 之间的区别 如果可能的话 还有它们的用法 考虑一个具有静态和动态变量的类 动态变量 创建类的实例时 每个对象都有自己的动态变量副本 对于每个对象 该变量的值都将不同 无论在该
  • 使用 Jest 模拟 jsonwebtoken 模块

    我尝试用玩笑来模拟 npm 模块 jsonwebtoken 的验证功能 该函数返回一个已解码的令牌 但我想将此函数的自定义返回传递给我的单元测试 我明确请求在继续请求之前检查访问令牌的有效性 但我想模拟令牌检查的时刻以直接返回用户值 并且轻
  • 使用过滤器或挂钩修改购物车总量

    好吧 我正在尝试编写一个过滤器或挂钩 它将根据购物车中的商品总数来修改购物车的总量 例如 如果购物车中有三件商品 我想从总订单中扣除二十美元 下面是我到目前为止的代码 非常感谢任何帮助 add filter woocommerce cart
  • CookieContainer 错误?

    我很困惑 CookieContainer 如何处理域 所以我创建了这个测试 此测试显示 cookieContainer 不会为 example com 返回任何 cookie 但根据 RFC 它应该返回至少 2 个 cookie 这不是一个
  • SunGridEngine、Condor、Torque 作为 PVM 的资源管理器

    有人知道哪个资源管理器适合 PVM 吗 或者我不应该使用 PVM 而是依赖 MPI 或其任何版本 例如 MPICH 2 还有其他更好的吗 使用 PVM 的主要原因是因为在我之前开始这个项目的人假设使用 PVM 然而 现在这个项目是我的了 他
  • 将内存流中的图像添加到 Excel 文档

    我在内存流中有一个图像 我想将其写入 MS Excel 文档 PIA 仅公开采用文件路径的 AddPicture 方法 有没有办法无需将图像写入光盘即可添加图片 MSDN http msdn microsoft com en us libr
  • 经典 ASP 中的超时问题

    我正在开发一个经典的 ASP 项目 在从数据库填充数据并将其绑定到 UI 中时遇到超时问题 我们得到以下错误 脚本超时 超出了脚本执行的最长时间 您可以通过为 Server Scripttimeout 属性指定新值或更改 IIS 作为管理工
  • 我使用 document.getelementsbyclassname 是否错误?

    当我输入文本框的值必须是 并且颜色必须是红色 我必须对三个文本框使用相同的函数 当我使用 document getelementsbyclassname 时 我的函数将无法工作 难道我做错了什么