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

QuerySelector没有显示我输入的内容+为什么onClick不能处理index.html和app.js文件?

QuerySelector没有显示我输入的内容是因为可能存在以下几种情况:

  1. 语法错误:在使用QuerySelector时,可能存在语法错误导致无法正确选择到元素。请确保选择器的书写正确,并且元素存在于DOM中。
  2. 元素未加载:如果在DOM加载完成之前执行了QuerySelector操作,可能无法选择到相应的元素。可以将QuerySelector操作放在页面加载完成的事件回调函数中,或者使用defer属性延迟脚本执行。
  3. 元素不存在:如果选择器选择的元素在DOM中不存在,QuerySelector将无法返回结果。请确保选择器选择的元素存在于DOM中。
  4. 元素隐藏或样式问题:如果选择的元素在页面中被隐藏或者存在样式问题,可能无法正确显示内容。可以通过检查元素的display属性或者相关样式来确认是否存在隐藏或样式问题。

至于为什么onClick不能处理index.html和app.js文件,这是因为onClick是一个HTML事件属性,用于指定当用户点击元素时执行的JavaScript代码。它只能用于HTML元素上,而不能直接用于处理文件。

index.html和app.js文件是属于服务器端的文件,不是HTML元素,因此无法直接使用onClick来处理它们。如果需要在点击某个元素时执行与这两个文件相关的操作,可以通过在HTML中引入相应的JavaScript文件,并在JavaScript文件中编写处理逻辑,然后将该逻辑与HTML元素的事件绑定起来,例如使用addEventListener方法。

需要注意的是,onClick只能用于处理HTML元素的点击事件,而不能直接用于处理文件的操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS 与 CSS 阻塞 DOM 渲染解析情况详解

可能此方式已经成为了约定俗成,但是究竟其好处在哪里,或者说其它方式为什么不可取,想必你也和我有同样疑问,那就接着来往下看吧。...其目录结构如下,其中index.jsstyle.css就是用于返回数据,app.js为服务器启动文件index.html是用来测试案例文件,剩余文件文件夹可以忽略。...有必要说明一下,本地运行node app.js启动后,浏览器输入http://127.0.0.1:3000/就能访问到index.html,而访问style.css可以输入http://127.0.0.1...,3s后页面显示出浅蓝色hello world。...上述仅仅是个人分析猜测,可以不必理会,仅作为讨论,所以也不敢妄下结论,误人子弟,此小节仅走马观花即可。 综上所述 综合上述所有情况,可以得出如下结论。

2.1K31

【总结】关于 JS 与 CSS 是否阻塞 DOM 渲染和解析

可能此方式已经成为了约定俗成,但是究竟其好处在哪里,或者说其它方式为什么不可取,想必你也和我有同样疑问,那就接着来往下看吧。...其目录结构如下,其中index.jsstyle.css就是用于返回数据,app.js为服务器启动文件index.html是用来测试案例文件,剩余文件文件夹可以忽略。...有必要说明一下,本地运行node app.js启动后,浏览器输入http://127.0.0.1:3000/就能访问到index.html,而访问style.css可以输入http://127.0.0.1...,3s后页面显示出浅蓝色hello world。...上述仅仅是个人分析猜测,可以不必理会,仅作为讨论,所以也不敢妄下结论,误人子弟,此小节仅走马观花即可。 综上所述 综合上述所有情况,可以得出如下结论。

1.4K10
  • 【译】开始学习React - 概览演示教程

    经过几次失败React入门尝试之后,终于开始了解它了,开始明白为什么可能想使用React而不是原始JS或jQuery。...如果你不熟悉Webpack,BabelNode.js,那这将是种恐怖入门方式。 让我们开始创建一个基本index.html文件。...在/public中,我们重要文件index.html,它与我们之前制作静态index.html文件非常类似 - 只是一个root div。这次,没有库或脚本被加载。...我们只保留index.cssindex.js。 对于index.css,只是将原始Primitive CSS 内容复制并粘贴到文件中。...JSX中属性方法是驼峰式 - onclick将变为onClick 自动闭合标签必须以斜杆结尾 - 例如 JavaScript表达式也可以使用大括号将包括变量,函数属性内容嵌入JSX

    11.2K20

    Web Worker介绍及使用案例

    下图是 Web Worker 主线程之间通信方式:图片用途Web Worker 意义在于可以将一些耗时数据处理操作从主线程中剥离,使主线程更加专注于页面的渲染交互。...先来个小demo体验下,跟着做个简易(简陋)计数器来看看Worker是怎么创建,以及Worker线程主线程之间是怎么通信1. 在本地新建项目目录2....由于实例化 Worker 时候,不支持传入本地 file:// 路径下脚本文件,必须读取网络上文件,因此在这里我们简单地在本地起一个 node 服务来处理 Worker 脚本读取问题;这里推荐使用...由于这种解耦,OffscreenCanvas 渲染与 DOM 完全分离了开来,并且比普通 Canvas 速度提升了一些,而这只是因为两者(CanvasDOM)之间没有同步。...文件限制:Worker 线程无法读取本地文件,即不能打开本机文件系统(file://),它所加载脚本,必须来自网络。

    88420

    JQuery 封装 Ajax Post 请求示例

    >本文不涉及然介绍其它相关内容,只是博主简单记录一下封装 POST 代码:myAjax.js:const obj2str = (obj) => { // 如果没有传参, 为了添加随机因子.../* method:请求类型;GET 或 POST url:文件在服务器上位置 async:true(异步)或 false(同步) */ if (type ==.../index.html图片index.html:<!..."];测试结果:图片那么遗留问题就是,博主在 php 后端使用 | 来进行分割返回给前端有没有什么弊端,如果你觉得有,那么是为什么,可以在下方评论区留言,下一篇文章将会带着这个文章可以延伸出一个新知识点哦...正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池键盘手表

    26200

    使用Webpack来做自己cra脚手架

    设置安装插件 初始化项目 先创建一个目录,然后通过终端进入该目录。在终端中输入npm init然后根据提示,生成自己package.json文件。...在终端输入npm i react react-dom 然后创建src,public文件夹,并且在public下创建一个index.html文件 粘贴以下模板 <!...但是,我们HelloWorld组件,如果没有写constructorsuper的话,将会报错。那么,接下来,我们就要需要安装更多插件来使我们类组件能够支持这样写法。...所以我们要先将public中index.html文件放入src。.../src/index.html' })] } 然后输入 npm run build 试一下,我们就可以看到在public文件夹中有了bundle.jS 文件,并且可以在本地使用。

    90840

    「Web编程API」- 01

    例如,C语言中有一个函数fopen()可以打开硬盘上文件,这个函数对于我们来说,就是一个C语言提供打开文件工具。...; Web API 一般都有输入输出(函数传参返回值),Web API 很多都是方法(函数); 学习 Web API 可以结合前面学习内置对象方法思路学习。...W3C已经定义了一系列 DOM 接口,通过这些 DOM 接口可以改变网页内容、结构样式。DOM是W3C组织制定一套处理 htmlxml文档规范,所有的浏览器都遵循了这套标准。...获取元素 为什么要获取页面元素?例如:我们想要操作页面上某部分(显示/隐藏,动画),需要先获取到该部分对应元素,再对其进行操作。 1.3.1....// 3.添加事件处理程序 div.onclick = function() { console.log('被选中了'); }

    66150

    前端成神之路-WebAPIs01

    例如, ​ C语言中有一个函数 fopen()可以打开硬盘上文件,这个函数对于我们来说,就是一个C语言提供打开文件工具。 ​...Web API 一般都有输入输出(函数传参返回值),Web API 很多都是方法(函数) 学习 Web API 可以结合前面学习内置对象方法思路学习 1.2....W3C 已经定义了一系列 DOM 接口,通过这些 DOM 接口可以改变网页内容、结构样式。 DOM是W3C组织制定一套处理 htmlxml文档规范,所有的浏览器都遵循了这套标准。...获取元素 为什么要获取页面元素? 例如:我们想要操作页面上某部分(显示/隐藏,动画),需要先获取到该部分对应元素,再对其进行操作。 1.3.1....// 3.添加事件处理程序 div.onclick = function() { console.log('被选中了'); }

    83510

    react新手demo——TodoList

    // 当前整一个项目的依赖 ---- 三:前期准备,安装依赖 1,首先我们新建一个todolist文件夹,根据我目录结构建好相应文件,如果大家嫌麻烦,大家可以clone项目,然后看着代码,我会一一进行说明...实现对不同格式文件处理,比如说分析转换scss为css,或者把下一代JS文件(ES6,ES7)转换为现代浏览器兼容JS文件,对React开发而言,合适Loaders可以把React中用到...css' // cssstyleloader,对css后缀文件进行处理 } ] }, devtool: 'cheap-source-map',...,是我们页面能够显示出来 编写模版文件index.html 在这个模版文件里面,我们引入 semantic.css 文件,然后建立一个 id=app 为了我们后续 react 操作...其实这边删除修改list状态都是在前端模拟处理,在实际工作中我们都会通过接口去处理,然后根据返回值进行更改state。 希望这篇文章对大家有一点启发,有任何问题可以在简书里私信我哦!

    1K40

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    本篇文章希望大家一起,尝试创建一个在线 Web 代码编辑器,并在 HTML、CSS JavaScript 帮助下实时显示结果。在本文最后也放置了源代码下载链接。...认为这也是一个有趣项目,因为了解如何构建代码编辑器将使你了解到做这个项目需要处理哪些功能模块。我们第一个需要了解模块是 CodeMirror。.../components/Editor'; 在 App.js 中,让我们分别声明保存 HTML、CSS JavaScript 编辑器内容状态。...,接下来要做就是在我们在代码编辑器中输入时在状态中显示结果。...你可能会问:为什么我们需要使用 setTimeout() ? 如果我们在没有情况下编写它,那么每次在编辑器中按下一个键,我们 iframe 都会更新,这通常不利于性能。

    12.1K30

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    本篇文章希望大家一起,尝试创建一个在线 Web 代码编辑器,并在 HTML、CSS JavaScript 帮助下实时显示结果。在本文最后也放置了源代码下载链接。...认为这也是一个有趣项目,因为了解如何构建代码编辑器将使你了解到做这个项目需要处理哪些功能模块。我们第一个需要了解模块是 CodeMirror。.../components/Editor'; 在 App.js 中,让我们分别声明保存 HTML、CSS JavaScript 编辑器内容状态。...,接下来要做就是在我们在代码编辑器中输入时在状态中显示结果。...你可能会问:为什么我们需要使用 setTimeout() ? 如果我们在没有情况下编写它,那么每次在编辑器中按下一个键,我们 iframe 都会更新,这通常不利于性能。

    75920

    【JavaEE初阶】JavaScript(WebAPI)

    如果事件处理代码比较多的话使用上面这种写法就不太合适了, 所以更推荐是下面这种写法, 可以直接使用onXXX这样方法进行绑定, 效果上面是一样....还要注意是, 通过innerHTML是可以获取到div内部html结构, 比如下面的代码, 会将div标签中html代码也获取到, 而innerText只能获取文本内容, 并不能获取html结构...这里把表单元素单拎出来是因为, 表单元素中有一些特别的属性是普通标签没有的, 主要需要区别的是一些表单元素想要获取其中用户输入内容的话是不能通过innerHTML拿到, 这是因为input, textarea...… 这些标签元素都是单标签, 是没有内容, 正确获取/修改方式应该是通过这些标签value属性来进行....= function(){ //取出输入框中内容 if(input.value == ''){ //输入没有值,用户未输入

    24320
    领券