JS怎么获取按钮里面的值并输出正确的结果

JavaScript08

JS怎么获取按钮里面的值并输出正确的结果,第1张

只有一种方法: 1)获取到button的dom节点 2)通过该节点获取value属性 示例 开始 var btn = document.getElementById('btn')//根据id获取button节点 alert(btn.value)//获取button的value属性

这要分两种情况:

1、按钮在div中。

我们可以通过:

var btn = document.getElementById("btn")//获取按钮节点

var div = btn.parentNode//获取di元素,当然不一定div就是按钮的父元素,可以通过parentNode向上查找,最好还是给div加一个id2、按钮不在div中

我们可以通过:

//以上这种情况最好给div加一个id,通过以下方式获得

var div = document.getElementById("div")

//如果不想加的话,以下方式

var divs = document.getElementsByTagName("DIV")

var div = divs.item(n)//n表示要取的div,从0开始

第一步,在HBuilder工具中已创建好的Web项目,指定目录下新建静态页面buttonClick.html,如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性

第二步,在title标签下引入vue.js核心JavaScript文件,注意压缩版本和开发版本,如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性

第三步,在<body></body>标签内,插入一个div和四个button,使用v-on绑定事件,如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性

第四步,在<div></div>标签下方,插入<script></script>标签,并在标签内编写事件函数,如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性

第五步,保存代码并在浏览器中查看结果,点击按钮,查看弹出的结果,如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性

第六步,弹出的结果为undefined,修改代码并在事件中传参数,然后再次查看结果,可以看到按钮的相关属性和方法(浏览器控制台),如下图所示:

如何使用Vue.js中的按钮点击事件并获取按钮属性