首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS实现动态获取当前点击事件的id属性值

整个页面是通过ajax请求最新的4部视频进行填充完成,视频列表又是通过template-web.js插件补上去的,所以导致所有ID值都是一样的,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态的ajax请求的属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接的格式在新打开的弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取的,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮的id值,然后使用button,将链接放在value中 Dom...对象的id属性可以获取元素的id值。...代码 function play(obj){ alert(obj.id) } 最后改造我的代码,最后实现,完成拼接。

25.9K20

JavaScrip最容易犯的十大错误及其避免方法()

Uncaught TypeError: Cannot read property 如果你是一个javascript开发者,你肯定看到过此错误 读取属性或调用方法的对象的未定义 这可能由于许多原因而发生,...让我们看一个在真实应用程序中如何发生这种情况的示例。 我们将选择React,但不正确初始化的相同原则也适用于Angular,Vue或任何其他框架。...反过来,这意味着ItemList将项目定义为未定义,并且您在控制台中收到错误 - “Uncaught TypeError:无法读取未定义的属性’map’”。 这很容易解决。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时,它总是返回undefined,我们无法获取或设置undefined的任何属性。...在这种情况下,应用程序将抛出“Uncaught TypeError无法设置未定义的属性”。 10.

18910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    1000多个项目中的十大JavaScript错误以及如何避免

    当你读取一个属性或调用一个未定义对象的方法时,Chrome 中就会报出这样的错误。 ? 导致这个错误发生的原因有很多,常见的一种情况是在渲染 UI 组件时,不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误,这与 Chrome 的上述错误基本相同,只是 Safari 使用不同的错误消息。 ? 3....这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 ?...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误,因为读取了未定义长度属性的变量。 ?...Uncaught TypeError: Cannot Set Property 当尝试访问未定义的变量时,总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。

    8.4K40

    1000个项目中前10名的JavaScript错误介绍

    当你读取一个未定义的对象的属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试(尝试)。...TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误,因为读取未定义变量的长度属性。...Uncaught TypeError: Cannot set property 当我们尝试访问一个未定义的变量时,它总是返回 undefined,我们不能获取或设置任何未定义的属性。

    6.2K10

    10 种最常见的 Javascript 错误

    当你读取一个未定义的对象的属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试(尝试)。 ?...TypeError: ‘undefined’ is not an object 这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。...TypeError: null is not an object 这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...TypeError: Cannot read property ‘length’ 这是 Chrome 中发生的错误,因为读取未定义变量的长度属性。 您可以在 Chrome 开发者控制台中进行测试。...Uncaught TypeError: Cannot set property 当我们尝试访问一个未定义的变量时,它总是返回 undefined,我们不能获取或设置任何未定义的属性。

    6.8K80

    React两大组件,三大核心属性,事件处理和函数柯里化

    需要引入prop-types.js文件 react中的props是只读的,修改会报错 如何给class类自身加上属性 props的简写方式 类式组件中的构造器与props 函数式组件使用props props...React中的事件处理 受控和非受控组件 非受控组件---现用现取 受控组件---省略ref 函数柯里化 []方式读取对象的属性 不使用函数柯里化的写法 入门 ---- 相关js库 1.react.js...提供了一些API来创建一种 “特别” 的一般js对象 const VDOM = React.createElement('xx',{id:'xx'},'xx') 上面创建的就是一个简单的虚拟DOM对象...否则,this.props 在构造函数中可能会出现未定义的 bug。...大写的这个是导入js包后,全局新增的一个对象,而Person.propTypes是我们需要给类上添加的一个属性,react底层会去寻找当前类上名字相同的属性,然后进行遍历,设置对应的类型限制和默认值 -

    3.1K10

    2020面试题--小试牛刀

    important 行内样式,在style属性里面写的样式。 id选择器 class选择器 标签选择器 通配符选择器* 浏览器的自定义属性和继承 *问题:flex布局常用属性?...答: 闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取[局部变量],所以闭包可以理解成“定义在一个[函数]内部的函数“。...undefined 是 Undefined 类型的唯一值,它表示未定义的值。当声明变量未赋值时,或者定义属性未设置值时,默认值都为 undefined。 *问题:promise是什么?...只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。...进阶React.js *问题:react生命周期?

    1.1K20

    来自1000多个项目的10大JavaScript错误浅析

    在Chrome里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在Chrome开发者控制台可以很容易地重现这个错误。...我们选择React作为示例,不过在其他框架(Angular、Vue等)中也是一样的。...TypeError: ’undefined’ is not an object 在Safari里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在Safari开发者控制台可以很容易地重现这个错误...TypeError: Object doesn’t support property 在IE里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在IE开发者控制台可以很容易地重现这个错误。...Uncaught TypeError: Cannot set property 我们无法对undefined变量进行赋值或读取操作,否则的话会抛出“Uncaught TypeError: cannot

    6.2K80

    React . js 是怎样炼成的?

    但是 JS 并没有提供相应的 API 来读取或者写入滚动惯性。 对包含 iframe 的页面来说,情况则更复杂。...但现实是这行不通,因为用户输入时值总是在变,会导致元素一直被替换,导致失去焦点;;更糟糕的是,并不是所有 HTML 元素都有这个属性。 ? 那使用所有元素都有的 id 属性呢?...这是可以的,如上图,我们可以容易的识别出前后 DOM 的差异。考虑表单情况,表单模型的输入通常跟 id 关联,但如果使用 AJAX 来提交表单的话,我们通常不会给 input设置 id 属性。...因此,更好的办法是引入一个新的属性名称,专门用来辅助 diff 算法。这个属性最终确定为 key 。这也是为什么在 React 中使用列表时会要求给子元素设置 key属性的原因。 ?...当 DOM 被修改后,浏览器必须更新元素的位置和真实像素; 当尝试从 DOM 读取属性时,为了保证读取的值是正确的,浏览器也会触发重排和重绘。

    2.8K40

    1000多个项目中的十大JavaScript错误以及如何避免

    当你读取一个属性或调用一个未定义对象的方法时,Chrome 中就会报出这样的错误。 [image.png] 导致这个错误发生的原因有很多,常见的一种情况是在渲染 UI 组件时,不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误,这与 Chrome 的上述错误基本相同,只是 Safari 使用不同的错误消息。...这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...出现这种情况的绝大部分原因是IE无法将当前名称空间内的方法绑定到this关键字。例如,如果你有 JS Rollbar 方法的命名空间 isAwesome。...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误,因为读取了未定义长度属性的变量。

    6.2K30

    TypeScript 学习笔记(一)

    编译型语言:编译为 js 后运行,单独无法运行; 强类型语言; 面向对象的语言; 优势 类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用; 可以在编译阶段就发现大部分错误...代表可选属性, 即该属性可以不存在, 但不允许添加未定义的属性 interface Person { name: string; age?...: number; } let tom: Person = { name: 'tom' } // age是可选属性 任意属性 定义了任意属性后可以添加未定义的属性,并可以指定属性值的类型 interface...'welson', age: 2 } // => 编译报错:给对象 person2 赋值,未定义只读属性id person2.id = 1; // => 编译报错:id为只读, 不可修改 函数类型接口...此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat 存取器(getter & setter):用以改变属性的读取和赋值行为

    2.8K10

    React实战精讲(React_TSAPI)

    文章list CSS重点概念精讲 JS_基础知识点精讲 网络通信_知识点精讲 JS_手写实现 前端工程化_知识点精讲 前端框架_React知识点精讲 好了,天不早了,干点正事哇。...这些⽂件将被 TypeScript 编译器,根据配置的编译选项编译成 3 个 js ⽂件,即 a.js、b.js 和 c.js。...如何解决context的值可能是未定义的情况呢。我们针对context的获取可以使用一个「自定义的hook。」...(prevProps,prevState):Updating时的函数,「在render之后调用」 prevProps:组件更新前的props prevState:组件更新前的state 可以读取,但无法使用...hook 的标签 ---- React v18中的hooks useSyncExternalStore useSyncExternalStore:是一个推荐用于读取和订阅外部数据源的 hook,其方式与选择性的

    10.4K30
    领券