按钮，而不是选择 [英] Buttons instead of select

问题描述

我工作的一个网站，我想用图标来选择出行方式，
我有一个工作的功能，但它只是一个选择的输入工作。
是否有修改它与按钮使用的方式？

在此先感谢！

功能：

 函数calcRoute（）{
  。VAR selectedMode =的document.getElementById（模式）的价值;
  VAR请求= {
      产地：的Thuis，
      目的地：kabk，
      //注意，JavaScript允许我们访问这个常数
      使用方括号和一个字符串值，其//
      //财产。
      travelMode：google.maps.TravelMode [selectedMode]
  };
  directionsService.route（要求，功能（响应状态）{
    如果（状态== google.maps.DirectionsStatus.OK）{
      directionsDisplay.setDirections（响应）;
    }
  }）;
 

HTML - 选择输入

 ＆LT;选择一个id =模式的onchange =calcRoute（）;＆GT;
    ＆LT;期权价值=驾驶＆GT;驾驶及LT; /选项＆GT;
    ＆LT;期权价值=行走＆GT;步行＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

HTML - （？）按钮输入

 ＆LT;表ID =模式＆GT;
    ＆LT;输入类型=按钮的onchange =calcRoute（）;值=驾驶＆GT;
    ＆LT;输入类型=按钮的onchange =calcRoute（）;值=行走＆GT;
＆LT; /表及GT;
 

解决方案

有是没有按钮的onchange 事件。使用的onclick 事件而不是

 ＆LT;表ID =模式＆GT;
    ＆LT;输入类型=按钮的onclick =calcRoute（本）;值=驾驶/＆GT;
    ＆LT;输入类型=按钮的onclick =calcRoute（本）;值=行走/＆GT;
＆LT; /表及GT;
 

修改
而且你要调整你的 calcRoute 函数

从

 函数calcRoute（）{
   。VAR selectedMode =的document.getElementById（模式）的价值;
   // ...
 

要

 函数calcRoute（BTN）{
    VAR selectedMode = btn.value;
    // ...
 

I'm working on a site and i want to use icons to select travel modes, i have a working function but it only works with a selection input. Is there a way to modify it to be used with buttons?

Thanks in advance!

Function:

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 input

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

HTML - Button input (?)

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

解决方案

There is no onchange event for buttons. Use the onclick event instead

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

Edit And you have to adjust your calcRoute function

From

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

To

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

这篇关于按钮，而不是选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！