代码判断if判断btns[i].getElementById("mainSubmitBtn")是否有值
时间: 2024-03-11 16:50:43 浏览: 53
如果要判断 `btns[i]` 中是否有 `id` 为 `mainSubmitBtn` 的元素,可以使用以下代码:
```javascript
if (btns[i].querySelector("#mainSubmitBtn")) {
// 元素存在,执行相应操作
} else {
// 元素不存在,执行相应操作
}
```
或者可以使用 `getElementById` 方法来获取元素,如果元素不存在则返回 `null`:
```javascript
if (btns[i].getElementById("mainSubmitBtn") !== null) {
// 元素存在,执行相应操作
} else {
// 元素不存在,执行相应操作
}
```
这里需要注意的是,`getElementById` 方法是针对整个文档的,而不是针对某个特定的元素。因此,应该对 `document` 对象调用该方法,而不是对其他元素调用。
相关问题
window.onload = function(){ var oList = document.getElementById("List"); var oCSS = document.getElementById("css"); var oBtn = document.getElementById("btns").children; var iW = 40; var shtml=""; var scss=""; var Lilength = oList.clientWidth / iW; var iZindex= 0; var iNow = 0; var aLi; var aLi = oList.children; for (var i=0;i<Lilength;i++ ) { i>Lilength/2?iZindex--:iZindex++; shtml+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></li>'; scss += "#List li:nth-child("+(i+1)+") a{background-position:-"+(iW*i)+"px 0}"; scss += "#List li:nth-child("+(i+1)+"){z-index:"+iZindex+"}"; } oList.innerHTML = shtml; oCSS.innerHTML += scss; for (var i=0;i<oBtn.length;i++ ) { oBtn[i].index = i; oBtn[i].onclick = function(){ oBtn[iNow].className = ""; for (var i=0;i<aLi.length;i++ ) { aLi[i].style.transition = "0.8s "+i*50+"ms"; aLi[i].style.WebkitTransform="rotateX(-"+(this.index)*90+"deg)"; } iNow = this.index; oBtn[iNow].className = "active"; } } }
这是一个用原生 JavaScript 实现的 3D 轮播图的代码。该代码在页面加载完成后会执行一个函数,该函数实现以下功能:
1. 获取轮播图的容器、CSS 样式表和轮播图的按钮。
2. 根据容器的宽度和每个轮播图面板的宽度计算出轮播图面板数量。
3. 根据轮播图面板数量生成 HTML 和 CSS 代码,用于初始化轮播图。
4. 为轮播图的按钮添加点击事件,点击按钮时实现轮播图的切换效果。
具体实现细节如下:
1. 获取轮播图的容器 `oList`,CSS 样式表 `oCSS`,轮播图的按钮 `oBtn`,以及每个轮播图面板的宽度 `iW`。
2. 计算轮播图面板数量 `Lilength`,该数量等于容器的宽度除以每个面板的宽度。
3. 根据轮播图面板数量生成 HTML 和 CSS 代码,分别存储在 `shtml` 和 `scss` 变量中。HTML 代码中使用 `li` 标签和四个 `a` 标签来表示每个轮播图面板。CSS 代码中使用 `nth-child` 选择器来设置每个 `li` 标签和 `a` 标签的样式,包括背景图片的位置和层级。
4. 将生成的 HTML 和 CSS 代码分别设置为轮播图容器 `oList` 的 innerHTML 和 CSS 样式表 `oCSS` 的 innerHTML。
5. 为轮播图的按钮添加点击事件。当点击按钮时,会将当前选中按钮的样式 `active` 移除,然后将所有轮播图面板的 `transition` 和 `-webkit-transform` 样式设置为实现 3D 旋转效果的值,最后将当前选中按钮的样式设置为 `active`。
需要注意的是,该代码使用了一些 CSS3 新特性,如 `transform` 和 `transition` 属性,因此在低版本浏览器中可能无法正常显示。
{ var i=0; btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击') }) } { var i=1; btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击') }) } { var i=2; btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击') }) } 这一段代码中,为什么不管点击哪个button,控制台都是打印5
这是因为在 JavaScript 中,变量的作用域是函数作用域,而不是块级作用域。在代码中,使用 `var` 声明的变量 `i` 在整个函数体内都是可见的,而不仅仅是在 `for` 循环内可见。
因此,当点击任何一个按钮时,使用的都是同一个变量 `i`,而这个变量的值在循环结束后被赋值为 `5`。因此,无论点击哪个按钮,控制台都会输出 `第5个按钮被点击`。
要解决这个问题,可以使用闭包来保留每个循环中的变量值。例如,可以将事件处理程序函数放在一个立即执行的函数表达式中,这样每个函数就会有自己的作用域,不会相互干扰。下面是一个示例代码:
```javascript
for (var i = 0; i < btns.length; i++) {
(function (j) {
btns[j].addEventListener('click', function () {
console.log('第' + j + '个按钮被点击');
});
})(i);
}
```
在上面的代码中,使用立即执行的函数表达式来创建闭包,将变量 `i` 的值传递给闭包中的参数 `j`。这样,每个事件处理程序函数都会有自己的作用域,并且不会相互干扰。
阅读全文