如何关联JS与HTML

如何关联JS与HTML

注：单独的js文件需要先导入html文件，代码才能生效。方法参见该连接link

1.js通过id操作html组件

代码示例

<!--html代码-->
<input type="text" id="myqr">//设定组件的id为“myqr”

通过document.getElementById()函数将组件与js变量关联
然后通过 （该变量.属性名）来操作组件对应属性

//js代码
var love = document.getElementById('myqr');//通过id获取对应组件的索引
var a = love.value;//将组件的value属性值赋给变量a
love.value = "love you so much";//将组件的输入内容设为该字符串
love.type = "file";//将组件的输入类型设为文件

2. JS函数通过onclick属性响应按钮

<!--html代码-->
<button onclick="myqr()">完成</button>

将按钮组件的onclick属性设为myqr()则点击该按钮时将触发js的myqr()函数

//js代码
function  myqr(){
	alert("love you so much");
}

如果你想要深入了解前端开发的高深技术知识，可以移步我的个人博客网站，从前端底层向你介绍相关技术：

web前端技术分享