Jump to content

Buttons instead of selection [SOLVED]


Recommended Posts

I'm working on a site and i want to use icons to select travel modes,i have an 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>

Edited by TheB
Link to post
Share on other sites

Pass a parameter to the function instead of accessing the element from the function. Buttons use the onclick event, not the onchange event.

<input type="button" onclick="calcRoute('DRIVING');"><input type="button" onclick="calcRoute('WALKING');"> 

Don't forget to erase the line that's currently setting the selectedMode variable.

function calcRoute(selectedMode) {...

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...