标记内的值发生变化时调用函数

2024-06-03

JavaScript 有没有什么方法可以在段落标记的值更改时调用函数。

概述:

HTML:

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>

JS:

function change() {
  document.getElementById("timer").innerHTML = "00:01";
}

function hello() {
  alert("Hello");
}

我想在段落值更改时发出警报(“Hello”)。 类似于检查段落值变化的连续函数。


您可以使用MutationObserver with characterData选项设置为true

<script>
  function change() {
    document.getElementById("timer").innerHTML = "00:01";
  }

  function hello() {
    alert("Hello");
  }
  window.onload = function() {

    var target = document.querySelector("p");

    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        hello()
      });
    });

    var config = {
      childList: true,
      subtree: true,
      characterData: true
    };

    observer.observe(target, config);
  }
</script>

<p id="timer">00:00</p>
<button onclick="change()">My Button</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

标记内的值发生变化时调用函数 的相关文章

  • 不显示 ul 中的项目符号 [重复]

    这个问题在这里已经有答案了 我在 ul 中显示项目符号时遇到问题 有谁知道问题出在哪里 my site http www minikoblizky wz cz zamestnanci html它以 Co od v s o ek v me 开
  • 递归process.nextTick警告

    作为我的应用程序的一部分 我有以下代码行 process nextTick function pre populate cache with all users console log scanning users table in ord
  • 我们可以为 border-bottom 属性设置渐变颜色吗? [复制]

    这个问题在这里已经有答案了 我们可以添加渐变颜色吗border bottomhtml块元素的属性 边框应该与此类似 谁能告诉我这在 CSS3 中是可能的吗 我像这样尝试过 但无法让它工作 border gradient border bot
  • 闭包和异步 Node.js 函数

    All 尝试了解 Node js 上下文中的闭包 异步调用 我有以下代码 timer setInterval pollOID 1000 function pollOID for channel in channels session get
  • onclick链接/按钮获取数据属性值

    span class btn btn block btn inverse btn icon glyphicons home i i Daily span span class btn btn block btn inverse btn ic
  • Django 管理中的自定义依赖下拉菜单

    我有一个按阶段模型的项目外键 我很难在 Django 管理页面中创建依赖的下拉列表 我想当用户从该项目的 项目下拉 阶段选择一个项目时 在第二个下拉菜单中显示 实现这一目标的最佳方法是什么 如果下拉列表根据其父级的值来过滤项目 那就太好了
  • 如何获取div背景图像上的锚标记?

    HTML div a href http www facebook com au a div css facey float left width 32px height 32px background url file C Users U
  • 为什么我的 css 在 IE9 中无法正确显示?

    几个小时前 我对我的 WordPress 主页做了一个小改动 现在 IE9 中出现了一些以前不存在的随机奇怪 CSS 问题 我曾使用 IE 的开发工具来尝试找出问题所在 但该工具与 firebug 相比实在是太糟糕了 而且问题只出现在 IE
  • Firebase 停止监听 onAuthStateChanged

    从版本 3 0 0 开始 我很难删除身份验证状态更改侦听器 要根据文档启动侦听器 firebase auth onAuthStateChanged function user handle it 但是 我在文档中找不到任何涉及删除身份验证状
  • 纯 JavaScript 工具提示

    我正在尝试用纯 JavaScript 制作一个工具提示 显示在hover 就像 Stack Overflow 中将鼠标悬停在个人资料名称 a 上一样div显示 我尝试使用onmouseover onmouseout并添加了setTimeou
  • 带搜索框的 D3 图表

    我在 D3 中创建了一个图表 其中节点显示特定个人创建文档的时间 该图表还显示了一个搜索框 该搜索框根据搜索框输入是否与与该文档关联的单词匹配而将节点变成红色 这些单词列在数据集的第 5 列中 请参阅下面的数据集 我的问题 一旦将搜索输入到
  • Python 中 Javascript 的 reduce()、map() 和 filter() 的等价物是什么?

    Python 的等价物是什么 Javascript function wordParts currentPart lastPart return currentPart lastPart word Che mis try console l
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • ag-Grid 中的行格式

    我们需要有条件地将行文本设置为粗体 目前它仅适用于单个单元格 但我们需要在所有列单元格上应用文本粗体 应用格式设置后 isBold 列必须隐藏 删除 此列仅用于格式化 如何应用文本缩进 10px isBold 列包含真实值的第一列的 有可能
  • 删除移动设备上的 adsense

    我正在研究响应式设计 但在使用 adsense 时遇到了问题 我有一个广告应该显示在桌面设计上 但不能显示在移动设计上 因此 只有在桌面上查看网站时 才应将广告代码放置在 html 中 css 可以使用 display none 但这违反了
  • 将 html

    我有一些服务器端代码当前支持 http 字节范围请求 没有任何问题 但是 我希望能够在将转码后的块发送到客户端之前使用 ffmpeg 即时转码视频文件 位于磁盘上 但 ffmpeg 要求我在获取字节时给它一个寻道时间范围来自客户 给定客户端
  • 什么是标志变量?

    最近我遇到了标志变量 但我不知道它们的作用 我不太确定何时使用标志变量以及如何使用它 我用 Google 搜索了它 但没有任何与我的上下文 JavaScript 相关的具体示例 标记变量的定义和使用 http www javascriptk
  • 事件监听器如何/何时附加到 d3.js 中?

    我正在尝试制作一个 SVG 编辑器 长话短说 我需要将鼠标事件附加到
  • React Native:当您的应用程序关闭时是否有回调函数?

    我有一个 setInterval 即使您关闭 而不是退出 应用程序也会继续运行 我想在我的应用程序关闭或设备进入睡眠状态时调用一个函数 以便清除 setInterval AppState 是你的朋友 看看AppState 的文档 https
  • 如何水平和垂直对齐内联块

    什么是最好 最干净的使用CSS对齐 dates div位于标题的右侧 垂直于中间 I tried float right 但这不允许vertical align 我想避免使用浮动 所以我使用inline block 并使用相对定位 有没有更

随机推荐

  • WTForms 中的小数字段舍入

    我有一个包含价格小数字段的表单 如下所示 from flask ext wtf import Form import wtforms from wtforms validators import DataRequired from deci
  • database.yml 的所有可能键是什么

    我刚刚发现reconnect true配置选项可以在database yml文件 还有哪些其他可能的配置选项 是否有所有选项的完整参考 已知的关键示例 default default adapter mysql2 encoding utf8
  • 计算复杂数组的abs()值的最快方法

    我想计算 C 或 C 中复杂数组元素的绝对值 最简单的方法是 for int i 0 i lt N i b i cabs a i 但对于大向量来说 速度会很慢 有没有办法加快速度 例如使用并行化 语言可以是 C 或 C 鉴于所有循环迭代都是
  • Azure Functions - 注入的 ILogger 日志未显示

    我在用着FunctionsStartup在 Azure Functions 项目中设置 IoC 绑定 但是 从注入创建的任何日志ILogger
  • 我应该在 Kubernetes 前面添加 DMZ 吗?

    Kubernetes Ingress 是否足够安全 可以避免在 Kubernetes 前面添加 DMZ 来暴露 Pod 和服务 如果有人 黑进 Pod 会发生什么 Thanks 这是一个意见问题 所以我会用一个选项来回答 如果您遵循 这是非
  • 用dagger 2查看依赖注入

    我有一个自定义视图扩展TextView 我应该在哪里调用我的组件来注入视图 component inject customTextView 因此 我发现我需要在自定义视图的构造函数中添加注入 在所有视图中 或者使一个调用另一个 Exampl
  • PHP - 获取 URL 中写入的 $_GET 参数字符串的最简单方法

    我正在尝试从一个页面重定向到另一页面 同时保留参数 例如如果我有一个页面 page php param1 1 param2 2 提取 param1 1 param2 2 的最简单方法是什么 Use SERVER QUERY STRING 访
  • 绘图:仅保留最相关的数据

    为了节省带宽并且不用自己生成图片 图表 我计划使用 Google 的图表 API http code google com apis chart http code google com apis chart 它的工作原理是简单地发出一个
  • NHibernate IQueryable 集合作为 root 的属性

    我有一个根对象 它有一个集合属性 例如 I have a Shelf object that has Books Now public class Shelf public ICollection
  • Weasyprint 在调用 write_pdf 时获得未定义的属性:“AttributeError:‘PosixPath’对象没有属性‘read_text’”

    我正在 ubuntu 18 04 上运行 weasyprint 项目 并尝试创建一个 pdf 当我尝试设置页脚图像时 问题就开始了 我正在 python 3 6 7 上运行 这是我调用 weasyprint 的代码 import sys i
  • 肥皂服务的良好框架是什么?

    我正在寻找一个用于肥皂的好框架service 我更喜欢使用Pythonic框架 但是在查看了soaplib rpclib 太不稳定 SOAPy 不适用于2 7 和ZSI 太 令人困惑 之后 我不确定这是否可能 我对使用另一种语言感到满意 尽
  • SwiftUI Nested ForEach 导致致命错误:每个布局项只能出现一次

    我正在尝试创建一个 LazyVGrid 视图来使用嵌套的 ForEach 语句显示数组中对象的内容 该代码导致应用程序崩溃 并显示消息 致命错误 每个布局项只能出现一次 每个对象都包含一个值数组 需要在网格中显示为一行 该行由包含对象 sk
  • 如何有效地将 gtts 音频转换为 pydub 音频片段?

    我想在 pydub 中操作 gtts 音频 但我不确定如何将 gtts 文件转换为 pydub 音频 我知道我可以将谷歌文本转换为语音音频到 mp3 并且我知道我可以使用 pydub 导入 mp3 但这个过程效率很低 有没有办法跳过创建 m
  • 增量决策树 C++ 实现

    有谁知道决策树分类器的增量实现吗 这样 当您将新实例添加到训练集中时 它可以根据现有决策树分类器以低计算量并尽可能快地生成最佳决策树分类器 换句话说 我有一个最优决策树分类器集A 其中命名为T 1 现在我想添加实例X to set A并找到
  • Python MySQL 模块

    我正在开发一个需要与 MySQL 数据库交互的 Web 应用程序 但我似乎找不到任何真正适合 Python 的模块 我特别寻找快速模块 能够处理数十万个连接 和查询 所有这些都在短时间内完成 而不会对速度产生重大影响 我想我的答案将是游戏领
  • 如何在Android Studio中关联.mp3文件

    我想根据列表视图项单击播放 mp3 文件 但是根据我的代码 我运行我的应用程序 出现此窗口 因此由于缺少音频选项 我真的不知道需要选择其中哪一个为了关联我的 mp3 文件 mainList setOnItemClickListener ne
  • 还有其他地方可以获得 google-services.json 吗?

    我尝试单击GET A CONFIGURATION FILE链接自the docs https developers google com identity sign in android start integrating get conf
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 如何使用Powershell变量打开Edge?

    我已经尝试过以下方法 edge New Object com microsoft edge application edge visible true edge FullScreen true 但我收到错误 New Object Retri
  • 标记内的值发生变化时调用函数

    JavaScript 有没有什么方法可以在段落标记的值更改时调用函数 概述 HTML p 00 00 p