Un able to manipulate the DOM with javascript

[Bobby Newland]

Hi,

For some reason I am unable to use javascript to manipulate the DOM. I have a formula to calculate distance and its working and storing in the local variable i can see from the dev tools in chrome.

(code is the LSV I'm setting shows 8.9 miles)

so i want to display this on all the locations i have coming back from the list service from the database (which everything else is working fine)

I have tried using a label a div and an input with .....

document.getElementById("IdName").innerHTML = "TEST"; document.getQuerySelectorAll("className").innerHTML = "TEST";
$(".className").html("TEST");
$("#IdName").html("TEST");
Apperyio("componentName").text("TEST");
Apperyio("componentName").val("TEST");

and none of them work.

I just want to display the data coming back from the local Storage Variable

I have also tried setting the property to read from local storage variable in the events area within the editor and that doesn't work either.

Could someone offer any suggestions?

[Bobby Newland]

Actualy found a work around: just inserted and html block and created a div and i am able to manipulate that with javascript. But I have a new problem now. For some reason the local storage variable is only reading the info from one location even though i have the latitude and longitude from each location mapped to local storage variable and I am passing them into the function as arguments it only reads the first location from the database. What would be the best way to get it to read each locations coordinates so it shows the distance from each location to the user. my code is:

var distance = function(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180;
var radlat2 = Math.PI * lat2/180;
var radlon1 = Math.PI * lon1/180;
var radlon2 = Math.PI * lon2/180;
var theta = lon1-lon2;
var radtheta = Math.PI * theta/180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180/Math.PI;
dist = dist * 60 * 1.1515;
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist / 1.609344 ;

};
localStorage.setItem("code",
distance(venLat,venLon,userLat,userLong,"K").toFixed(1)
);

And i am getting the data back into the div with this code:

Code: Select all

 #test { 
     text-align:center; 
 }     

but its showing the same distance on all locations

and my mapping is:

Thanks in advance,
Bobby

[Illya Stepanov]

Hi Bobby,

Please clarify this part:
[quote:]
so i want to display this on all the locations i have coming back from the list service from the database (which everything else is working fine)
[/quote]

• What service you are using? - With what components it's works?

[Bobby Newland]

Hi Illya

Thanks for the quick reply. All of the info from the locations that is stored in the database is showing up such as the name and image ect.., but i have manually set the local storage variable for distane with javascript using the latitude and longitude for the locations that is stored in the database and mapped to 2 LSV one for latitude and one for longitude and i also am using the geolocation service to get the users location which are also mapped to 2 LSV one for latitude and one for longitude and i am passing them into the function to calculate the distance between the user and the location with the code above

[Bobby Newland]

also just noticed it reads null on mobile device for the distance but i have the locations sorted by $nearsphere using the geopoint and that part is working fine just shows the distance as null. very weird

[Illya Stepanov]

Hi Bobby,

Also please check the values of that local storage variables that you're using.

[Bobby Newland]

decided to use the google distance api but just one small issue see here
https://getsatisfaction.com/apperyio/...

[Illya Stepanov]

Thank you Bobby, we'll continue in that thread.