I'm working on a google maps v3 project and i've come to a point where i need some help. I have a google map where the user can enter a start and end points, which works fine but when i want to enter waypoints for some reason they wont work( up to 8 waypoints ). Could someone look at the code and help me?
This is how far i have come with the project:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<link href="map_style.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="maps.js"></script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<body onload="initialize()">
<div id="total"></div>
<div id="map-canvas"></div>
<div id="control_panel">
<div id="user_input">
<label for="start">Start :</label>
<input type="text" id="start" name="start" /><br />
<i>Add multiple Stops along the route (Optional)</i><br />
<ul id="stops">
<li>
<label for="stop1">Stop 1:</label>
<input type="text" id="stop1" name="stop1" />
</li>
</ul>
<input type="button" id="addScnt" value="Add Stop" /><br />
<label for="end">End :</label>
<input type="text" id="end" name="end" /><br />
<br />
<input type="submit" value="Create Route" onclick="calcRoute();" />
<input type="button" id="button" value="Show/Hide Directions" onclick="toggle_visibility('directions_panel');" />
</div>
</div>
<div id="directions_panel"></div>
</body>
</html>
And this is my js file:
$(document).ready(function () {
var scntUl = $('#stops');
var ii = $('#stops').size() + 1;
var MaxInputs = 8;
$('#addScnt').live('click', function () {
if (ii <= MaxInputs) {
$('<li><label for="stop' + ii +'">Stop ' + ii + ': </label><input type="text" id="stop' + ii +'" name="stop' + ii + '" /><input type="button" id="remScnt" value="X" /></li>').appendTo(scntUl);
ii++;
}
return false;
});
$('#remScnt').live('click', function () {
if (ii > 2) {
$(this).parents('li').remove();
ii--;
}
return false;
});
});
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.LatLng(37.09, -95.71);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: map
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions_panel"));
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
for (var ii = 0; ii < thisStop; ii++) {
var thisStop = document.getElementById("stop" + (ii+1)).value;
if (thisStop.length > 0) {
if (thisStop.length > 0) {
waypts[ii] = {location: thisStop};
}
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions_panel');
summaryPanel.innerHTML = '';
}
computeTotalDistance(response);
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
var miles = 0.000621371192;
document.getElementById("total").innerHTML = ("Total distance is: "+ (Math.round( totalDist * miles * 10 ) / 10 ) + " miles " + " and " + " Approximate time is: " + (totalTime / 60 / 60).toFixed(1) + " hours.");
}
If someone needs more info please let me know. Thank you
That's a lot of code to look at. Can you put up a test page, or even a fiddle?
In the meantime, I do see a problem here:
var scntUl = $('#stops');
var ii = $('#stops').size() + 1;
$('#stops') gives you a jQuery object for the <ul id="stops"> element itself, not its children. The length of this object will be 1 no matter how many <li> elements you add inside it. Perhaps you want $('#stops>li') instead? That will give you a jQuery object containing all of the <li> elements.
(BTW you can use the .length property instead of the .size() method - the method is there only for compatibility with old code.)
Also, why are you adding 1 to that length? I didn't look at the code much beyond that, but if you want the number of <li> elements you would just take .length as it is.
I also noticed that the <input> elements all have id="remScnt". You shouldn't use an id more than once; use a class or generate unique ids (or both).
One other thing - .live() is deprecated; use .on instead.
Updated after you posted the map link...
Take a look at this code:
for (var ii = 0; ii < thisStop; ii++) {
var thisStop = document.getElementById("stop" + (ii+1)).value;
if (thisStop.length > 0) {
if (thisStop.length > 0) {
waypts[ii] = {location: thisStop};
}
}
}
There are at least three or four problems here. But rather than try to fix this code as it is, why not take advantage of jQuery to make it easier?
First, go back to the code in your #addScnt click handler where it appends each new <li> into the DOM, and add a classname to the <input> tag, e.g.
<input class="waypoint" ...and the existing attributes here... />
And then where you have that loop above, change it to:
var waypts = [];
$('.waypoint').each( function( i, input ) {
var value = $(input).val();
if( value.length ) waypts.push({ location: value });
});
Note that this code no longer depends on the inputs having the IDs stop1, stop2, etc. Unless you need those IDs elsewhere, you can remove them.
Also I noticed you still have this code:
var scntUl = $('#stops>li');
var ii = $('#stops').length;
What do you think the value of ii will be here? Also, later you have this:
$('<li>...</li>').appendTo(scntUl);
That can't be right. Shouldn't this be appending to #stops itself? You're nesting <li> elements now, which is not what you intended.
Finally, use the Developer Tools in Chrome or another browser to troubleshoot these problems. SO is a great resource, of course, and questions here are always welcome. But it's even better when you can troubleshoot the problems you run into right now with the Developer Tools in Chrome or other browsers. It's worth spending some time exploring all the options available there. Start here for a tutorial on the Chrome DevTools.
Related
I am having issues displaying data from localStorage into my HTML page, when I open the console the data is been saved, the issue is with innerhtml.
Below is both my html and JS code.
When i run the console, I can see that my data is saved on localStorage, the issue is inputing that data into the page
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fizzle</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body class="">
<div class="row">
<div class="col">
<ul class="workouts">
<section class="weather">
<div id="today-container">
<div class="current-weather">
<h3 class="brand">the weather</h3>
</div>
<div>
<h1 class="temp">16°</h1>
<div class="city-time">
<h1 class="name">London</h1>
<small>
<span class="date">Monday Sep 19</span>
</small>
</div>
</div>
</section>
<form class="form hidden">
<div class="form__row">
<label class="form__label">Type</label>
<select class="form__input form__input--type">
<option value="running">Running</option>
<option value="cycling">Cycling</option>
</select>
</div>
<div class="form__row">
<label class="form__label">Distance</label>
<input id="distance-input"
class="form__input form__input--distance"
placeholder="km"
/>
</div>
<div class="form__row">
<label class="form__label">Duration</label>
<input id="duration-input"
class="form__input form__input--duration"
placeholder="min"
/>
</div>
<div class="form__row">
<label class="form__label">Elevation</label>
<input id ="elevation-input"
class="form__input form__input--cadence"
placeholder="meters"
/>
</div>
<button class="form__btn">OK</button>
</form>
</ul>
</div>
<div class="col">
<div id="map"></div>
</div>
<p> <h4 class="ElementThatHoldsTheHistoryData"></h4></p>
</div>
<div id="floating-panel"></div>
<div id="sidebar"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API Key here"
defer>
</script>
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIkey here=initMap&libraries=geometry"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is my JS code:
enter code her/Get all necessary elements from the DOM
const temp = document.querySelector(".temp");
const dateOutput = document.querySelector(".date");
const timeOutput = document.querySelector(".time");
const distance = document.querySelector("#distance-input");
const duration = document.querySelector("#duration-input");
const elevation = document.querySelector(".form__input--elevation");
const todayContainer = document.querySelector("#today-container");
// set my variables
var currentWeather = document.querySelector(".current-weather");
var APIkey = "&appid=99d1a7e58f500ed377f1399b47f88c6a";
var distanceInput = document.getElementById("distance-input");
var durationInput = document.getElementById("duration-input");
var elevationInput = document.getElementById("elevation-input");
var map;
var markers = [];
var directionsService;
var directionsRenderer;
var workoutElements = document.getElementsByClassName("workout");
var btn = document.querySelector(".form__btn");
//Default city when the page loads/------------------------------------------------------------
let cityInput = "London";
/// Get date /----------------------------------------------------------------------------------------------------------------
const date = moment().format("h:mm a - dddd MMM YY");
dateOutput.innerText = date;
// console.log(date);
// Google map
// map code with 2 markers and directions-----working code------------------------
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 51.509865, lng: -0.118092 }, //center mapp to Hyde park London
zoom: 12.5,
});
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setOptions({
polylineOptions: {
strokeColor: "red",
},
suppressMarkers: true,
});
// Add a click event listener to the map
google.maps.event.addListener(map, "click", function (event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
// Add the marker at the clicked location
var marker = new google.maps.Marker({
position: location,
map: map,
});
markers.push(marker);
if (markers.length >= 2) {
calculateAndDisplayRoute();
}
}
function deleteMarkers() {
// Clear markers from the map
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
//function to add distance and duration:
function calculateAndDisplayRoute() {
var request = {
origin: markers[0].getPosition(),
destination: markers[1].getPosition(),
travelMode: "BICYCLING",
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC,
};
directionsService.route(request, function (response, status) {
if (status === "OK") {
directionsRenderer.setDirections(response);
var distance = response.routes[0].legs[0].distance.text;
var duration = response.routes[0].legs[0].duration.text;
var elevation = response.routes[0].legs[0].elevation;
// set input values
document.getElementById("distance-input").value = distance;
document.getElementById("duration-input").value = duration;
document.getElementById("elevation-input").value = elevation;
} else {
window.alert("Directions request failed due to " + status);
}
});
}
function getLocation() {
navigator.geolocation.getCurrentPosition((data) => {
const lat = data.coords.latitude;
const lon = data.coords.longitude;
initMap(lat, lon);
currentConditions(lat, lon);
});
}
//Weather
//fetch data from current weather api, and display desired data on the page
function currentConditions(lat, lon) {
let currentWeatherAPI = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}${APIkey}&units=metric`;
const tempDisplay = document.querySelector(".temp");
const cityname = document.querySelector(".name");
fetch(currentWeatherAPI)
.then(function (response) {
return response.json();
})
.then(function (wdata) {
// city's name, and use moment to get the date
// var city = getLocation();
// weather condition icon
var weatherIcon = wdata.weather[0].icon;
//add
tempDisplay.innerText = Math.round(wdata.main.temp) + "°";
cityname.innerText = wdata.name;
});
}
getLocation();
// local storage
btn.addEventListener("click", function (event) {
event.preventDefault();
// Clear form
distance.value = "";
duration.value = "";
// Clear markers from the map
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var rides = JSON.parse(localStorage.getItem("rides")) || []; // Add new ride to existing rides data in LS
var newRide = { distance: distance.value, duration: duration.value };
rides.push(newRide);
localStorage.setItem("rides", JSON.stringify(rides));
// for loop to iterate through the collection of elements and set the innerHTML property of each element to the stored data.
var element = document.querySelector("ElementThatHoldsTheHistoryData");
for (let i = 0; i < rides.length; i++) {
var h4 = document.createElement("p");
h4.textContent = `The Distance was ${rides[i].distance} and the Duration was ${rides[i].duration}`;
element.appendChild(h4);
}});
Arrange your p tag like this
const h4 = `<p>The Distance was ${rides[i].distance} and the Duration was ${rides[i].duration}</p>`
Instead of document.querySelector I would prefer to use getElementById or className
document.getElementById('question-header').append(h4)
Finally, append your HTML to the Id
I have code like this:
<input type="text" id="start" name="o">
<input type="text" id="end" name="d">
<input type="text" id="total" name="total" hidden="hidden">
<button onclick="calcRoute();" value="/index.php?route=information/mymove" >text</button>
<script>
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").value = total + " km";
}
</script>
If I use this code for the button:
<input type="button" value="go" onclick="calcRoute();"> this executes the javascript function, but does not pass the data to another page.
I have also this part in the controller file:
if (isset($this->request->post['o'])) {
$data['o'] = $this->request->post['o'];
}
if (isset($this->request->post['d'])) {
$data['d'] = $this->request->post['d'];
}
if (isset($this->request->post['total'])) {
$data['total'] = $this->request->post['total'];
}
A few important things: you need to make this button a proper submit button, you need to make sure it returns callback as opposed to calling the function directly and you need to make sure the callback returns false. This is how to prevent default behaviour which would be sending the form without running the script.
<form action="index.php?route=information/mymove" method="post">
<input type="text" id="start" name="o">
<input type="text" id="end" name="d">
<input type="text" id="total" name="total" hidden="hidden">
<button type="submit" onclick="return calcRoute();">text</button>
</form>
<script>
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
return false;
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
document.getElementById("total").value = total + " km";
}
</script>
I think you should be able to modify the computeTotalDistance function so that once all the calculations are complete it will add the total value to the desired hidden input and then submit the form.
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").value = total + " km";
if( total && document.getElementById("total").value!='' ) document.getElementById("total").parentNode.submit();
}
Alternatively another option would be to use this same callback function to send and ajax request to the same endpoint url.
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById("total").value = total + " km";
/* send the total by ajax to endpoint url */
ajax.call( this, url, 'total='+total, (r)=>{
alert(r);
} );
}
function ajax( url, params, callback ){
with( new XMLHttpRequest() ){
onreadystatechange=function(e){
if( this.status==200 && this.readyState==4 ){
callback.call( this.response )
}
}
open( 'POST', url, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
It was not originally stated that you wished to view the total in another page, merely that you wished to send the value to another page. As that is a requirement then ajax, in this case, is not the best option at all - as there is a form it should be submitted as my initially modified function tries to do.
update:
Full example, tested and working which emulates what your code is trying to do.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*
consider this as "another page" - the form has submitted to here
and you can see the POST data...
*/
exit(printf('<pre>%s</pre>',print_r($_POST,true)));
}
?>
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: Route Calculations</title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
<script>
function initMap(){
let _lat = 56.55;
let _lng = -2.72;
let _form = document.querySelector( 'form[name="route-plotter"]' );
let latlng=new google.maps.LatLng( _lat, _lng );
let options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
let map = new google.maps.Map( document.getElementById('map'), options );
const calcroute=function(){
let request = {
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
let directionsService = new google.maps.DirectionsService();
let directionsDisplay = new google.maps.DirectionsRenderer();
directionsService.route(request, function(response, status) {
if ( status == google.maps.DirectionsStatus.OK ) {
directionsDisplay.setDirections( response );
calculatedistance( response );
}
});
};
const calculatedistance=function(result){
let total=0;
let route=result.routes[0];
route.legs.forEach( leg=>{
total+=leg.distance.value;
});
document.getElementById('total').value=total;
_form.submit();
};
_form.querySelector('button').addEventListener('click',calcroute,false)
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
</head>
<body>
<div id='map'></div>
<form name='route-plotter' method="post">
<input type="text" id="start" name="start" value="dundee" />
<input type="text" id="end" name="end" value="aberdeen" />
<input type="text" id="total" name="total" hidden="hidden">
<button type="button">Go get the distance</button>
</form>
</body>
</html>
I'm working on a code for extract information from an .json file and print it on a website. I achived all but now I have a problem, the data is showing only 1 result, it create all boxes/places for the other information but only the first "box" have information.
<head>
<!-- Title and Extern files -->
<title>SSL Checker</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/db.json"></script>
</head>
<body>
<div id="header">
<h2>SSL Checker</h2>
</div>
<div id="form">
<p>Introduce the URL:</p>
<input id="txtbx" type="text">
<button type="submit" onClick="agregar_caja()">Send</button>
<div id="inf">
<p type="text" id="hl1"></p>
<p type="text" id="hl2"></p>
</div>
<script>
//Extract
console.log(MyJSON[1].url)
var cajas = 2
var boxsaved = MyJSON.length
fnc = function(info) {
hey = document.getElementById("hl1").innerHTML = info.url;
}
//box creator
sm = function agregar_caja() {
document.getElementById("inf").innerHTML += "<p type=text id='hl" + new String(cajas + 1) + "'><br>"
cajas = cajas + 1
}
//Loops
for (i = 0; i < boxsaved; i++) {
sm(MyJSON[i]);
}
for (i = 0; i < MyJSON.length; i++) {
fnc(MyJSON[i]);
}
</script>
</body>
And .json file:
var MyJSON = [{
"url": 'google.es',
},
{
"url": 'yahoo.com',
}]
The problem is that your first box is the only element that your fnc function alters - notice that it only uses the hl1 id to access and alter an element, never hl2+.
I'll try to keep to your original approach, so that you'll follow it more easily. You might do something like this:
var cajas = 2;
function sm(info) {
cajas = cajas + 1;
document.getElementById("inf").innerHTML += (
'<div id="hl' + cajas + '">' + info.url + '</div>'
);
}
for (var i = 0; i < MyJSON.length; i++) {
sm(MyJSON[i]);
}
It is very difficult to read all the code, but as i've got it, you want to add some elements with url's from your JSON.
Ok, we have parent element div with id='inf', lets use javascript function appendChild to add new elements.
And we will use document.createElement('p') to create new elements.
Here is the code, as I've understood expected behavior.
var infContainer = document.getElementById('inf');
var elNumber = 2;
function agregar_caja() {
MyJSON.forEach(function(item,i) {
var newElement = document.createElement('p');
newElement.innerHTML = item.url;
newElement.id = 'hl'+elNumber;
elNumber++;
infContainer.appendChild(newElement);
}
)}
I am using geolocation to collect coordinates and make an API call to get the weather in Fahrenheit. I'm assigning the global variable tempNum this value within one of my functions that adds the temperature to the page using function getWeatherByCoordinates(latitude, longitude).
Later, I am trying to access this variable and pass the value as an argument into another function typeConversion for which I am attempting to convert the temperature value to Celsius. It is returning NaN and when debugging, I can't figure out why.
Here is my HTML and JS. I feel like since I declared my variable at the global level and set "return varName" in the function that I assigned the value to it, that the value should be accessible throughout my JS; but I may have done something wrong or misunderstood variable scope. Please assist.
var place = document.getElementById("meat");
var header = document.getElementById("header");
var weather = document.getElementById("Weather");
var latitude;
var longitude;
var coordinates = document.getElementById("coordinates");
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getWeatherByCoordinates(latitude, longitude);
};
//else {
// //Write Code to alternatively show a Zip-Code Search Box;
//};
navigator.geolocation.getCurrentPosition(success);
var city = document.getElementById("city");
var weatherDescription = document.getElementById("weather-description");
var roundTempF;
var roundTempC;
var tempNum;
var tempStringFFull
function getWeatherByCoordinates(latitude, longitude) {
var fullURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
var tempString = data.main.temp;
var tempNum = parseInt(tempString);
roundTempF = Math.floor(tempNum);
stringF = roundTempF.toString();
tempStringFFull = stringF + "\xB0" + " F";
weather.innerText = tempStringFFull;
city.innerText = data.name;
weatherDescription.innerText = data.weather[0].description;
if (data.dt > data.sys.sunrise && data.dt < data.sys.sunset) {
$("#whole-page").removeClass("whole");
$("#whole-page").removeClass("night");
$("#whole-page").addClass("day");
}
else {
$("#whole-page").removeClass("whole");
$("#whole-page").removeClass("night");
$("#whole-page").addClass("night");
};
event.preventDefault();
});
return tempNum;
};
function typeConversion(tempNum) {
if (changeTempType.innerText === "Celsius") {
var tempStringC;
var celsiusDecimal = (tempNum - 32) * (5 / 9);
roundTempC = Math.floor(celsiusDecimal);
tempStringC = roundTempC.toString();
tempStringC += "\xB0" + " C";
weather.innerText = tempStringC;
changeTempType.innerText = "Farenheit";
return;
}
else if (changeTempType.innerText === "Farenheit") {
weather.innerText = tempStringFFull;
changeTempType.innerText = "Celsius";
return;
}
else {
weather.innerText = "We are unable to retrieve the weather at this time. Please try again later";
changeTempType.innerText = "Celsius";
return;
};
};
var changeTempType = document.getElementById("change-temp-type");
changeTempType.addEventListener("click", typeConversion, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Weather</title>
</head>
<body id="whole-page" class="whole">
<div class="wrapper">
<h2 id="header">Check the Current Temperaturate by Zip Code</h2>
<label>Farenheit</label>
<input type="radio" name="temp-type" value="C" id="Celsius-radio"/><label>Celsius</label>-->
<button id="change-temp-type">Celsius</button>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="button" value="Get Weather!"/>
</form>
<div>
<h3 id="city"></h3>
<h3 id= "Weather" class="temp-text"></h3>
<h4 id="weather-description"></h4>
</div>
</div>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"> </script>
<script src="javascript/main.js"></script>
</body>
</html>
You have a couple of issues:
You re-declare var tempNum = in your function, meaning it will be a new variable only accessible inside the function scope (leaving the global one unchanged)
Your code inside of $.getJSON is using an asynchronous callback - that means it will run sometime later than the code below it. When you return tempNum, that code has not run yet.
Your return statement isn't really doing anything... just reassigning the global variable will be sufficient.
UPDATE - issue I missed at first:
You are naming your function parameter in typeConversion "tempNum". Again, that will result in a new variable, only accessible within the scope of that function. If you want to affect the global, then this function does not need any parameters at all, and tempNum will then refer to the global variable as intended.
I've tried to clear up all issues below.
var place = document.getElementById("meat");
var header = document.getElementById("header");
var weather = document.getElementById("Weather");
var latitude;
var longitude;
var coordinates = document.getElementById("coordinates");
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getWeatherByCoordinates(latitude, longitude);
};
//else {
// //Write Code to alternatively show a Zip-Code Search Box;
//};
navigator.geolocation.getCurrentPosition(success);
var city = document.getElementById("city");
var weatherDescription = document.getElementById("weather-description");
var roundTempF;
var roundTempC;
var tempNum;
var tempStringFFull
function getWeatherByCoordinates(latitude, longitude) {
var fullURL = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
var tempString = data.main.temp;
// removed "var tempNum"...
tempNum = parseInt(tempString);
roundTempF = Math.floor(tempNum);
stringF = roundTempF.toString();
tempStringFFull = stringF + "\xB0" + " F";
weather.innerText = tempStringFFull;
city.innerText = data.name;
weatherDescription.innerText = data.weather[0].description;
if (data.dt > data.sys.sunrise && data.dt < data.sys.sunset) {
$("#whole-page").removeClass("whole");
$("#whole-page").removeClass("night");
$("#whole-page").addClass("day");
}
else {
$("#whole-page").removeClass("whole");
$("#whole-page").removeClass("night");
$("#whole-page").addClass("night");
};
event.preventDefault();
});
//return tempNum;
};
// removed the argument "tempNum", just use the global
function typeConversion() {
if (changeTempType.innerText === "Celsius") {
var tempStringC;
var celsiusDecimal = (tempNum - 32) * (5 / 9);
roundTempC = Math.floor(celsiusDecimal);
tempStringC = roundTempC.toString();
tempStringC += "\xB0" + " C";
weather.innerText = tempStringC;
changeTempType.innerText = "Farenheit";
return;
}
else if (changeTempType.innerText === "Farenheit") {
weather.innerText = tempStringFFull;
changeTempType.innerText = "Celsius";
return;
}
else {
weather.innerText = "We are unable to retrieve the weather at this time. Please try again later";
changeTempType.innerText = "Celsius";
return;
};
};
var changeTempType = document.getElementById("change-temp-type");
changeTempType.addEventListener("click", typeConversion, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Weather</title>
</head>
<body id="whole-page" class="whole">
<div class="wrapper">
<h2 id="header">Check the Current Temperaturate by Zip Code</h2>
<label>Farenheit</label>
<input type="radio" name="temp-type" value="C" id="Celsius-radio"/><label>Celsius</label>-->
<button id="change-temp-type">Celsius</button>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="button" value="Get Weather!"/>
</form>
<div>
<h3 id="city"></h3>
<h3 id= "Weather" class="temp-text"></h3>
<h4 id="weather-description"></h4>
</div>
</div>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"> </script>
<script src="javascript/main.js"></script>
</body>
</html>
Last note - this will work fine if the function where you need to access tempNum runs later, like in response to a user action. It may still be undefined for a few ms after your page loads, so if you try to use it right at page load time, it may still be undefined. You may want to initialize it to some default value in this case.
Hope this helps.
So having problems with both methods. Method (this.howMuch) is supposed to calculate the distance given car went (based on speed and time inputs). Method (this.printAll) is supposed to print all information about objects that are in the array. The only error i see is that "carConstruct.howMuch is not a function at HTMLButtonElement". Same error for the second method if i delete the first one.
All help appreciated. Code below:
var vardas = document.getElementById("name");
var laikas = document.getElementById("time");
var greitis = document.getElementById("speed");
var driver = document.getElementById("driver");
var addCar = document.getElementById("addCar");
var race = document.getElementById("race");
var box = document.getElementById("box");
var cars = [];
function carConstruct(name, time, speed, driver, distance){
this.name = name;
this.time = time;
this.speed = speed;
this.driver = driver;
this.distance = 0;
this.howMuch = function(){
for(var i=0; i<cars[i]["time"]; i++){
this.distance = this.distance + (cars[i]["speed"] * cars[i]["time"]);
}
}
this.printAll = function(){
for(var i=0; i<cars.length; i++){
console.log(cars[i]["name"]);
console.log(cars[i]["speed"]);
console.log(cars[i]["driver"]);
console.log(cars[i]["distance"]);
}
}
}
addCar.addEventListener("click", function(){
var carNew = new carConstruct(vardas.value, laikas.value, greitis.value, driver.value);
cars.push(carNew);
vardas.value = "";
greitis.value = "";
driver.value = "";
});
race.addEventListener("click", function(){
carConstruct.howMuch();
carConstruct.printAll();
});
<!doctype html>
<html>
<head>
<title>J21ND</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="J21ND.css">
</head>
<body>
<div class="fields">
<h1>Car Race</h1>
<input id="name" type="text" placeholder="Input car name">
<input id="time" type="number" placeholder="Input car time">
<input id="speed" type="number" placeholder="Input car speed">
<input id="driver" type="text" placeholder="Input driver level, select: Rookie or Pro">
</div>
<div class="buttons">
<button id="addCar">Add Car</button>
<button id="race">Start Race</button>
</div>
<div id="box">
</div>
<script src="J21ND.js"></script>
</body>
</html>
You could do it by simply adding a global flag. Here is the customized code.
// Above code will remain same in js and HTML code will remain same as well
var flag =0;
addCar.addEventListener("click", function(){
var carNew = new carConstruct(vardas.value, laikas.value, greitis.value, driver.value);
cars.push(carNew);
flag=1;
vardas.value = "";
greitis.value = "";
driver.value = "";
});
race.addEventListener("click", function(){
if(flag!=0){
var addedCar = cars.pop()
addedCar.howMuch();
addedCar.printAll();
flag =0;
}else{
alert('Please Add Car First');
flag =0;
}
});