按钮而不是选择答案

【问题标题】：Buttons instead of select按钮而不是选择
【发布时间】：2012-05-28 16:50:56
【问题描述】：

我正在开发一个网站，我想使用图标来选择出行模式，我有一个工作功能，但它只适用于选择输入。有没有办法修改它以与按钮一起使用？

提前致谢！

功能：

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: thuis,
      destination: kabk,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

HTML - 选择输入

<select id="mode" onchange="calcRoute();">
    <option value="DRIVING">Driving</option>
    <option value="WALKING">Walking</option>
</select>

HTML - 按钮输入 (?)

<form id="mode">
    <input type="button" onchange="calcRoute();" value="DRIVING">
    <input type="button" onchange="calcRoute();" value="WALKING">
</form>

【问题讨论】：

What have you tried?

标签： javascript google-maps select button input

【解决方案1】：

按钮没有onchange 事件。请改用onclick 事件

<form id="mode">
    <input type="button" onclick="calcRoute(this);" value="DRIVING" />
    <input type="button" onclick="calcRoute(this);" value="WALKING" />
</form>

编辑你必须调整你的calcRoute函数

来自

function calcRoute() {
   var selectedMode = document.getElementById("mode").value;
   //...

到

function calcRoute(btn) {
    var selectedMode = btn.value;
    // ...

【讨论】：

注意：第一行是var selectedMode = document.getElementById("mode").value;。而且表单中没有value。
@Derek 错过了这一点。谢谢:)
@Andreas，太冗长了 ;) - onclick="calcRoute(this);" 不那么痛苦。
@Alexander 我没想到这一点。啊^^谢谢:)
感谢您的帮助！混淆 onChange 和 onClick 事件非常愚蠢；-)。我有人调查它，他通过将function calcRoute() 更改为function calcRoute(selectedMode) 然后在事件中说明旅行模式来让它工作：onclick="calcRoute('DRIVING');"

【解决方案2】：

function calcRoute(ev) {
    var ev = ev || window.event,
        btn = (ev.target || ev.srcElement);
    var selectedMode = btn.value;  //"this" will return the element in the demo
    var request = {
        origin: thuis,


<form id="mode">
            <!--Use onClick-->
    <input type="button" onclick="calcRoute(ev);" value="DRIVING" />
    <input type="button" onclick="calcRoute(ev);" value="WALKING" />
</form>

:) 工作演示： http://jsfiddle.net/DerekL/T7NrF/

【讨论】：