Cannot read properties of undefined (reading 'style') at obtn.<computed>.onclick

时间: 2023-11-23 14:56:26 浏览: 38
这个错误通常是由于在JavaScript代码中引用了未定义的变量或对象而导致的。在这种情况下，'style'属性无法读取，因为它所在的对象未定义。要解决这个问题，您可以检查代码中是否存在未定义的变量或对象，并确保它们被正确地声明和初始化。 另外，您还可以尝试使用JavaScript的调试工具来帮助您找到问题所在。例如，您可以使用浏览器的开发者工具来检查代码并查看哪些变量未定义或未初始化。
相关问题

Uncaught SyntaxError SyntaxError: Unexpected end of JSON input at xhr.onreadystatechange (c:\Users\xi\Desktop\sb\serve\public\login.html:83:37) --- XMLHttpRequest.send --- at obtn.<computed>.onclick (c:\Users\xi\Desktop\sb\serve\public\login.html:88:17)这个错误怎么改

这个错误通常表示接收到的 JSON 数据不完整，可能是服务器端没有正确地将 JSON 数据发送到客户端浏览器。或者，浏览器在接收数据时发生了中断。 要解决此错误，您可以尝试以下几种方法： 1. 检查服务器端代码，确保服务器正确地发送了完整的 JSON 数据。 2. 如果您使用的是 AJAX，可以尝试使用回调函数来处理接收到的数据，以确保数据完整。 3. 检查您的代码，确保没有其他地方中断了数据的传输。 4. 如果以上方法都没有解决问题，您可以尝试使用浏览器的开发工具来查看接收到的 JSON 数据，以确定哪里出了问题。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码

这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。因此，需要给每一个表单元素都设置name属性，例如： ```html <input type="text" name="name"> ``` 2. 在性别选项中，使用了一个嵌套的form元素，这是不合法的HTML结构。应该将性别选项用label元素包裹，并为每个选项设置id属性，然后在label元素中使用for属性指向该选项的id，例如： ```html <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label> ``` 3. select元素没有设置name属性，也无法选择默认选项。应该给select元素设置name属性，并在其中加入一个默认选项（可以使用disabled和selected属性来禁止该选项被选中），例如： ```html <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> ``` 4. input元素的id属性应该为小写字母。 下面是改进后的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名：<input type="text" name="name"><br> <br> 账号：<input type="text" name="account"><br> <br> 密码：<input type="password" name="password"><br> <br> <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br> <br> <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select><br> <br> <input id="btn" type="button" value="提交"> </form> </body> </html> ```

相关推荐

zip

HTML5 3D卷纸表单填写动画特效.zip

oBtn1 = document.getElementById("btn1"), oShadow = document.getElementsByClassName("shadow")[0], oCon = document.getElementsByClassName("con"), oIcon1 = document.getElementsByClassName('icon1')...
pdf

聊一聊JS中this的指向问题

JS中的this指向一直是个让人头疼的问题，想当初我学的是天昏地暗，查了好多... oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn1; function fn1(){ alert(this); //o
pdf

javascript中 try catch用法

先看个实例 <input id='b1' type='button' value='\u6309\u94ae'/>...oBtn.attachEvent(onclick,mto,false); } catch(e)//IE { oBtn.addEventListener(click,mto,false); } }; [removed] 注意的是： addEventLis

<input type="button" value="播放/暂停"/>
<script> var myVideo =document.querySelector("#myVideo"); var oBtn =document.querySelector("input") oBtn.onclick = function (){ if(myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 为上述代码增添一些新功能，并给出添加后的代码

<span id="currentTime">00:00</span>/<span id="duration">00:00</span> <script> var myVideo = document.querySelector("#myVideo"); var playBtn = document.querySelector("input[value='播放/暂停']"); var ...

解释每条代码<style> fieldset{ width: 350px ; margin: 100px auto ; } p{ font-size: 0.8em; color: #999; text-indent: 2em; } li{ line-height: 40px; } label{ display:inline-block ; width: 200px; text-align: right; margin-right: 10px; } #height{ width: 60px; } #weight{ width: 60px; } </style> </head> <body> <fieldset> <legend>标准体测测试</legend> 身体质量指数，是BMI（Body Mass Index ）指数，简称体质指数，是国际上常用的衡量人 体胖瘦程度以及是否健康的一个标准。计算公式为：BMI=体重÷身高²。（体重单位：千克； 身高单位：米。）BMI由19世纪中期的比利时通才凯特勒最先提出。 <label for="height">请输入你的身高(cm):</label> <input type="number" id="height" min="40"> <label for="weight">请输入你的体重(kg):</label> <input type="number" id="weight" min="20"> <input type="button" name="" id="myBtn" value="开始测试"> </fieldset> <script> var oBtn = document.getElementById("myBtn") var BMI oBtn.onclick=function(){ let result let oHeight = document.getElementById("height").value/100 let oweight = document.getElementById("weight").value BMI = oweight/(oHeight*oHeight) if(isNaN(BMI)) { alert("请输入合法数字") } else { if(BMI<18.5) result = "体重过轻" if(BMI>18.5 && BMI<=23.9) result = "体重正常" if(BMI>=24) result="体重超重" if(BMI>24 && BMI<=26.9) result = "肥胖前期" if(BMI>27 && BMI<=29.9) result = "I度肥胖" if(BMI>=30) result = "II度肥胖" if(BMI>=40) result = "III度肥胖" } alert(result) } </script>

- <style>标签定义了网页的样式，包括fieldset、p、li、label和input等元素的样式，例如宽度、颜色、字体大小等等。 - <fieldset>标签定义了一个表单域，包含了检测BMI所需的输入框和按钮等元素。 - <p>标签...

<html> <head> <meta charset="utf-8"/> <title>第4次js</title> <script> window.onload=function(){ //获取父元素dl var myDl=document.getElementById("myDl"); //获取第一个按钮 var oBtn1=document.getElementById("btn1"); //给btn1添加单击事件 oBtn1.onclick=function(){ //创建一个dd元素节点 var dd=document.createElement("dd"); //创建一个文本节点，内容是灭绝师太 var oText=document.createTextNode("灭绝师太"); //将文本节点添加到创建的dd节点中， dd.appendChild(oText); //再将创建好的dd添加到dl列表中 myDl.appendChild(dd); } } </script> </head> <body>
姓名列表：
张无忌
张三丰
张翠山
<button id="btn1">将"灭绝师太"添加到ul列表中</button> <button id="btn2">将"周芷若"插入到"张三丰"前</button> <button id="btn3">用"杨逍"替换"张翠山"</button> <button id="btn4">删除"张无忌"</button></body> 如何同时实现4个按钮的效果

<title>第4次js</title> <script> window.onload=function(){ //获取父元素dl var myDl=document.getElementById("myDl"); //获取第一个按钮 var oBtn1=document.getElementById("btn1"); //给btn1添加单击...

oBtn.onclick = function() { oSunlight.style.display = "flex"; oSunlight.style.animation = "shot 3s"; oSunlight.style.animationFillMode ="forwards"; }针对以上代码，给我的动画写一个重置动画的按钮

oBtn.onclick = function() { oSunlight.style.animation = 'none'; // 先将animation设为none oSunlight.offsetHeight; // 触发重绘 oSunlight.style.animation = null; // 再将animation设为null }; 通过...

.sun-line { width: 5px; height: 200px; background-color: yellow; margin: 15px; transform: rotate(15deg); animation: shot 3s linear infinite paused; } <input type="button" name="start" id="btn" value="开始" />window.onload = function() { var oBtn = document.getElementById("btn"); var isPaused = false; // 记录动画状态 oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < oSunline.length; i++) { if (oSunline[i].style.animationPlayState === 'paused') { oSunline[i].style.animationPlayState = 'running'; } else if (oSunline[i].style.animationPlayState = 'running') { oSunline[i].style.animationPlayState = 'paused'; } } } } 如何使我每点击一次按钮，动画就自动播放一次

oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < oSunline.length; i++) { oSunline[i].style.animationPlayState = 'running'; } } } ...

Window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { var oSunline = document.getElementByClassName("sun-line"); for (let i=0,i<9,i++){ if (oSunline[i].style.animationPlayState ==='paused') { oSunline[i].style.animationPlayState ='running' }else { oSunline[i].style.animationPlayState = 'paused'; } } } }我的代码为什么没有效果

oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < 9; i++) { if (oSunline[i].style.animationPlayState === 'paused') { oSunline[i].style....

// 定义一个函数，以便于获取DOM对象 function $$(id){ return document.getElementById(id) } // 按钮控制太阳光线动画 window.onload = function() { let oSunline = document.getElementsByClassName("sun-line"); const oBtn = $$("btn"); const re-oBtn = $$("re-btn"); let oSunlight = $$("sun-light"); oBtn.onclick = function() { //正向按钮 oSunlight.style.display = "flex"; } re-oBtn.onclick = function() { oSunlight.style.display = "none"; } }为什么按钮没有用

根据提供的代码，按钮应该是有用的。但是需要确认以下几点： ... 2. 是否有错误提示出现在控制台中； 3. 按钮是否被正确地绑定了事件监听器。 如果以上几点都没有问题，那么按钮应该能够正常工作。...

window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < 9; i++) { if (oSunline[i].style.animationPlayState === 'paused') { oSunline[i].style.animationPlayState = 'running'; } else { oSunline[i].style.animationPlayState = 'paused'; } } } }为什么我的按钮只能控制一次

oBtn.onclick = function() { var oSunline = document.getElementsByClassName("sun-line"); for (let i = 0; i < oSunline.length; i++) { if (isPaused) { // 如果动画状态为暂停，则播放动画 oSunline[i]....

// 定义一个函数，以便于获取DOM对象 function $$(id){ return document.getElementById(id) } alert("页面已经加载完成！"); // 按钮控制太阳光线动画 window.onload = function() { let oSunline = document.getElementsByClassName("sun-line"); const oBtn = $$("btn"); const re-oBtn = $$("re-btn"); let oSunlight = $$("sun-light"); oBtn.onclick = function() { oSunlight.style.display = "flex"; } re-oBtn.onclick = function() { oSunlight.style.display = "none"; } }为什么不执行

这段代码可能不执行的原因有以下几点： 1. 页面没有引入该 JavaScript 文件； 2. 页面中没有 id 为 "btn" 或 "re-btn" 的元素，或者是元素还没有加载完成； 3. 页面中没有 class 为 "sun-line" 的元素，或者是元素...

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;iLilength/2?iZindex--:iZindex++; shtml+=''; 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"; } } }

1. 获取轮播图的容器 oList，CSS 样式表 oCSS，轮播图的按钮 oBtn，以及每个轮播图面板的宽度 iW。 2. 计算轮播图面板数量 Lilength，该数量等于容器的宽度除以每个面板的宽度。 3. 根据轮播图面板数量...

// 定义一个函数，以便于获取DOM对象 function $$(id){ return document.getElementById(id) } // 按钮控制太阳光线动画 window.onload = function() { const oBtn = $$("btn"); let oSunlight = $$("sun-light"); oBtn.onclick = function() { oSunlight.style.display = "flex"; } }为什么按钮无反应

代码看起来没有问题。... 请确保以下几点： ... ...如果以上两点都没有问题，请尝试在 window.onload 函数外面添加一个 console.log() 语句，以确保 JavaScript 代码已经执行。...console.log("JavaScript code is ...

// 定义一个函数，以便于获取DOM对象 function $$(id){ return document.getElementById(id) } // 按钮控制太阳光线动画 window.onload = function() { const oBtn = $$("btn"); let oSunlight = $$("sun-light"); let oSunline = document.getElementsByClassName("sun-line") oBtn.onclick = function() { oSunlight.style.display = "flex"; } }错在哪

代码中存在一个错误，因为 document.getElementsByClassName() 函数返回的是一个元素集合，而不是单个元素。因此，如果想要访问集合中的第一个元素，需要将其索引为 [0]。在这种情况下，可以将以下行: ...

// 定义一个函数，以便于获取DOM对象 function $$(id) { return document.getElementById(id) } // alert("页面已经加载完成！"); // 按钮控制太阳光线动画 window.onload = function() { let oSunline = document.getElementsByClassName("sun-line"); let oBtn = $$("btn"); let reoBtn = $$("re-btn"); let oSunlight = $$("sun-light"); let oSunHouse = $$("sun-house") let oSHDian = $$("s-h-dian") oBtn.onclick = function() { oSunlight.style.display = "flex"; //阳光动画开始 oSunlight.style.animation = "shot 1s"; oSunlight.style.animationFillMode = "forwards"; //阳光动画结束 // s-h-电力传输开始 setTimeout(function() { oSHDian.style.animation = "move 1s infinite linear"; }, 1000) if (oSHDian.style.opacity="0"){ oSHDian.style.opacity="1"; } } reoBtn.onclick = function() { oSunlight.style.animation = 'none'; // 先将animation设为none oSunlight.offsetHeight; // 触发重绘 oSunlight.style.animation = null; // 再将animation设为null oSHDian.style.animation = 'none'; // s-h-电力传输结束 oSHDian.offsetHeight; oSHDian.style.animation = null; if (oSHDian.style.opacity="1"){ oSHDian.style.opacity="0"; } }帮我检查一下

1. 在判断 oSHDian.style.opacity 的值时，应该使用 == 或 ===，而不是 =。因为 = 是赋值操作符，会将 oSHDian.style.opacity 的值设为 1，这可能会导致预期之外的结果。 2. 在重置动画的时候，应该先...

var obtn = document.getElementsByTagName('button'); //为button元素绑定单击事件 obtn[0].onclick = function(){ //获取输入的用户名和密码 var username = document.getElementById("username").value; var password = document.getElementById("pwd").value; //定义data对象。储存用户名和密码 var data = { username: username, password: password }; var data = encodeURIComponent(JSON.stringify(data)); //创建AJAX对象 var xhr = new XMLHttpRequest(); //调用AJAX的open（）方法， 初始化http请求 xhr.open('POST','http://localhost:3000/login'); //设置请求头 xhr.setRequestHeader('Content-Type','application.json; charset=UTF-8'); //onreadystatechange事件处理函数 xhr.onreadystatechange = function(){ if (xhr.readyState ===4 ){ //接收服务器的响应数据 var data = JSON.parse(decodeURIComponent(xhr.responseText)); alter (data.msg); } }; //发送请求 xhr.send(data); };

obtn[0].onclick = function() { var username = document.getElementById("username").value; var password = document.getElementById("pwd").value; var data = { username: username, password: password ...

最新推荐

recommend-type

毕业设计基于STC12C5A、SIM800C、GPS的汽车防盗报警系统源码.zip

STC12C5A通过GPS模块获取当前定位信息，如果车辆发生异常震动或车主打来电话（主动请求定位），将通过GSM发送一条定位短信到车主手机，车主点击链接默认打开网页版定位，如果有安装高德地图APP将在APP中打开并展示汽车当前位置 GPS模块可以使用多家的GPS模块，需要注意的是，当前程序对应的是GPS北斗双模芯片，故只解析 GNRMC数据，如果你使用GPS芯片则应改为GPRMC数据即可。 系统在初始化的时候会持续短鸣，每初始化成功一部分后将长鸣一声，如果持续短鸣很久（超过20分钟），建议通过串口助手查看系统输出的调试信息，系统串口默认输出从初始化开始的所有运行状态信息。 不过更建议你使用SIM868模块，集成GPS.GSM.GPRS，使用更加方便
recommend-type

基于tensorflow2.x卷积神经网络字符型验证码识别.zip

基于tensorflow2.x卷积神经网络字符型验证码识别 卷积神经网络（Convolutional Neural Networks, CNNs 或 ConvNets）是一类深度神经网络，特别擅长处理图像相关的机器学习和深度学习任务。它们的名称来源于网络中使用了一种叫做卷积的数学运算。以下是卷积神经网络的一些关键组件和特性： 卷积层（Convolutional Layer）： 卷积层是CNN的核心组件。它们通过一组可学习的滤波器（或称为卷积核、卷积器）在输入图像（或上一层的输出特征图）上滑动来工作。 滤波器和图像之间的卷积操作生成输出特征图，该特征图反映了滤波器所捕捉的局部图像特性（如边缘、角点等）。 通过使用多个滤波器，卷积层可以提取输入图像中的多种特征。 激活函数（Activation Function）： 在卷积操作之后，通常会应用一个激活函数（如ReLU、Sigmoid或tanh）来增加网络的非线性。 池化层（Pooling Layer）： 池化层通常位于卷积层之后，用于降低特征图的维度（空间尺寸），减少计算量和参数数量，同时保持特征的空间层次结构。 常见的池化操作包括最大池化（Max Pooling）和平均池化（Average Pooling）。 全连接层（Fully Connected Layer）： 在CNN的末端，通常会有几层全连接层（也称为密集层或线性层）。这些层中的每个神经元都与前一层的所有神经元连接。 全连接层通常用于对提取的特征进行分类或回归。 训练过程： CNN的训练过程与其他深度学习模型类似，通过反向传播算法和梯度下降（或其变种）来优化网络参数（如滤波器权重和偏置）。 训练数据通常被分为多个批次（mini-batches），并在每个批次上迭代更新网络参数。 应用： CNN在计算机视觉领域有着广泛的应用，包括图像分类、目标检测、图像分割、人脸识别等。 它们也已被扩展到处理其他类型的数据，如文本（通过卷积一维序列）和音频（通过卷积时间序列）。 随着深度学习技术的发展，卷积神经网络的结构和设计也在不断演变，出现了许多新的变体和改进，如残差网络（ResNet）、深度卷积生成对抗网络（DCGAN）等。
recommend-type

【三维装箱】遗传和模拟退火算法求解三维装箱优化问题【含Matlab源码 031期】.zip

【三维装箱】遗传和模拟退火算法求解三维装箱优化问题【含Matlab源码 031期】.zip
recommend-type

自己编写的python 程序计算cpk/ppk

cpk&ppk python 小程序,品友点评
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构：Kafka与Hive集成

![实现实时数据湖架构：Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势： - **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。 - **数据民主化：**实时数据湖使各种利益相关者都可
recommend-type

SQL怎么实现 数据透视表

SQL可以通过使用聚合函数和GROUP BY子句来实现数据透视表。 例如，假设有一个销售记录表，其中包含产品名称、销售日期、销售数量和销售额等信息。要创建一个按照产品名称、销售日期和销售额进行汇总的数据透视表，可以使用以下SQL语句： ``` SELECT ProductName, SaleDate, SUM(SaleQuantity) AS TotalQuantity, SUM(SaleAmount) AS TotalAmount FROM Sales GROUP BY ProductName, SaleDate; ``` 该语句将Sales表按照ProductName和SaleDat
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
recommend-type

"互动学习：行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依