按鈕而不是選擇

我正在一個網站上工作，我想用圖標來選擇旅行模式，我有一個工作功能，但它只適用於選擇輸入。有沒有辦法將其修改爲與按鈕一起使用？按鈕而不是選擇

在此先感謝！

功能：（？）

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>

來源

2012-05-28 Bram de Leeuw

（http://whathaveyoutried.com） –

沒有爲按鈕沒有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; 
    // ...

來源

2012-05-28 16:56:26 Andreas

注意：第一行是'VAR selectedMode =的document.getElementById（「模式」）。值;'。而且在表格中沒有「價值」。 –

@Derek錯過了那個。謝謝:) – Andreas

@Andreas，太冗長了;） - 'onclick =「calcRoute（this）;」'不太痛苦。 – Alexander

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>

This should work for you. :)工作演示：[？你嘗試過什麼]http://jsfiddle.net/DerekL/T7NrF/

來源

2012-05-28 16:59:08

按鈕而不是選擇

回答

相關問題