asp.net获取单选按钮值_【我们的第一个微信小程序】第四篇：当按钮按下的时候-CSDN博客

了解完页面中如何使用变量值和我们如何在js文件中修改变量值之后，你还记得我们一开始的目标吗？

我们要做到在用户点击“确定”按钮之后改变<text>标签体中的文本，也就是我们的tip变量。

现在我们已经知道了如何修改页面中的tip变量，也就是使用Page对象的setData函数。那么剩下的工作就只有如何知道用户按下了“确定”按钮了。在程序中，我们可以使用“事件监听机制”来做到这一点。

事件监听机制指的就是某一个特定的事件发生时调用指定的一个函数，比如在按钮被按下的时候。如果我们可以让小程序在一个按钮被按下的时候调用一个我们定义的函数，那就可以在这个函数里改变<text>标签的内容了。

通过<button>元素的bindtap属性我们可以指定一个监听按钮按下事件的回调函数。这里我们设置的是confirmNum函数，每次界面上的“确定”按钮被按下时这个函数都会被调用。

接着我们就去js文件中实际创建这个函数：

confirmNum: function () {
    tapCount++;
    this.setData({
      tip: '你点击了' + tapCount + '次'
    });
  }

注意，在前一个onLoad函数的大括号{}后面，我们加了一个逗号。后面新加上的confirmNum函数和前面的onLoad函数格式是一样的，但是在confirmNum函数里，我们会把一个放在Page对象外面的tapCount变量先加1，然后再把<text>标签里的内容给改成'你点击了' + tapCount + '次'。

刷新页面我们来点击试试。刚开始时界面是这样的：

点击一次之后是这样的：

再点一次是这样的：

随着我们点击次数的增加，<text>标签里显示的次数也会不断地增加。到这里我们就完成了我们的第一个任务——在点击“确定”按钮时修改文本提示的内容。

获取到文本框中输入的数字

第二步就是要获取文本框里的数字了，这同样要通过一个监听事件的回调函数来实现。不过这次变成了监听输入框<input>标签的输入事件。我们可以通过<input>标签的bindinput属性来指定监听这个事件的函数，在下面的代码里就是inputNumber。

同样的，这个inputNumber函数也要定义在index.js里：

这段代码里其实有用的就是第一句代码this.data.input = event.detail.value;，这句话的意思是把文本输入框里面现在的值event.detai.value保存到页面this里保存数据用的data里，对应的key是input。第二句console.log(...)其实只是为了把文本框里的值打在控制台上看看。

inputNumber: function (event) {
    this.data.input = event.detail.value;
    console.log("input的值变成了" + this.data.input);
}

为什么event.detail.value里面会有文本输入框里现在的值呢？因为bindinput指定的函数是用来监听输入框的文本变化的，在回调函数里会有一个入参event，这个参数就代表了触发回调函数的事件。而在输入框的文本变化事件中，这个事件对象里的detail.value中保存的就是输入框里现在的文本值。

我们刷新页面之后往文本输入框里输入一些数字试试：