Develop Reference

How can I properly use array for my problem? Javascript

I'm having trouble figuring out on how can I properly use the array of distance that I made. I am creating a simple web app where user is going to select their origin and preferred destination and I need to compute for the ETA. I already can compute for ETA but the code is so long and so I was wondering if there is better way to do this.
for example:
1) in the select options I have 4 locations which is manila,QC, makati and marikina.
2) if the user selected Manila as Origin and QC as the destination I can compute it using only if-else but if I were to consider every possible way my code will be long with if-else statement.
BTW this is just a sample data of select options and the true data consist of 24 locations and destinations. So I'm really hoping I can have an easy way to do this.
I only tried if-else statement and I was thinking maybe I just loop it but I don't how to start.
please see code for reference. Thank you!
console.clear()
function validateSelect(e) {
var origin = e.target.querySelector("[name=origin]").value;
var destination = e.target.querySelector("[name=destination]").value;
if (origin == destination) {
e.stopPropagation()
e.preventDefault()
alert("Origin and Destination can't be the same");
return false;
}
}
var distanceArray = [10000,20000,30000];
//manila to qc 10000 meter
//qc to makati 20000 meter
//makati to marikina 30000 meter
document.getElementById('findEta').addEventListener('submit', validateSelect);//for form find eta
function getEta(){
var selectedOrigin = document.getElementById("origin").selectedIndex;
var selectedDestination = document.getElementById("destination").selectedIndex;
var estimatedTimeOfArrival = document.getElementById("estimatedTimeOfArrival");
if((selectedOrigin == 0)&& (selectedDestination == 1)){
//manila to qc
distance = 10000;
var speed = 5.56; //converted speed from 20km/h
time = distance/speed;
eta = Math.floor(time).toString();
if((eta >=60)){
var newEta = eta /60; //minutes
var mod = eta%60; //seconds
newEta = Math.floor(newEta);
estimatedTimeOfArrival.value = newEta + "m "+mod+"s" ;
}else{
eta.toString();
estimatedTimeOfArrival.value = eta + " s";
}
}else if((selectedOrigin == 0)&& (selectedDestination == 2)){
distance = 20000;
var speed = 5.56;
time = distance/speed;
eta = Math.floor(time).toString();
if((eta >=60)){
var newEta = eta /60; //minutes
var mod = eta%60; //seconds
newEta = Math.floor(newEta);
estimatedTimeOfArrival.value = newEta + "m "+mod+"s" ;
}else{
eta.toString();
estimatedTimeOfArrival.value = eta + " s";
}
}else if((selectedOrigin == 0)&& (selectedDestination == 2)){
distance = 30000;
var speed = 5.56;
time = distance/speed;
eta = Math.floor(time).toString();
if((eta >=60)){
var newEta = eta /60; //minutes
var mod = eta%60; //seconds
newEta = Math.floor(newEta);
estimatedTimeOfArrival.value = newEta + "m "+mod+"s" ;
}else{
eta.toString();
estimatedTimeOfArrival.value = eta + " s";
}
}
}
function alertFunction(){
var selectedOrigin = document.getElementById("origin").value;
var selectedDestination = document.getElementById("destination").value;
var estimatedTimeOfArrival = document.getElementById("estimatedTimeOfArrival");
if((selectedOrigin == "")&&(selectedDestination =="")){
alert("Please select an option first.");
}else if(selectedOrigin == selectedDestination){
validateSelect(e);
}
else{
getEta();
alert("\nYour Origin is: "+selectedOrigin+"\nYour Destination is: "+selectedDestination+"\nYour ETA is: "+estimatedTimeOfArrival.value);
}
}
<form action="" id="findEta">
<select name="origin" id="origin">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<select name="destination" id="destination">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<input type="hidden" name="estimatedTimeOfArrival"id="estimatedTimeOfArrival">
<button type="submit" value="submit" onclick="alertFunction()">submit</button>
</form>

We can rule out travel from point A to point A (0 distance) and we can assume that the trip from point A to point B is the same distance as the reverse trip. With this, representing places as single letters (a, b, c, d) a matrix of distances can be described compactly like this... (with made-up distance values)
let distances = {
ab: 1000,
ac: 2000,
ad: 3000,
bc: 1500,
bd: 2500,
cd: 1200
}
function distance(from, to) {
let key = [from, to].sort().join('')
return distances[key]
}
console.log(distance('d', 'a'))
console.log(distance('b', 'c'))

If my understanding is correct, your ETA calculation is the same for each, the variables are the origin and destination which together give you the distance.
To simplify your logic, what you can do is store your distances indexed by these in an object or multi-dimensional array e.g.:
const distances = {
0: {
1: 10000,
2: 20000
},
...
}
And then just lookup the distance from there, e.g.:
const distance = distances[selectedOrigin][selectedDestination];
const speed = 5.56;
...
To take this one step further, you could make it easier to read your structure by using the name values directly in your object, e.g.:
const distances = {
manila: {
qc: 10000,
makati: 20000
},
...
}
And then use the values during lookup, e.g.:
const selectedOrigin = document.getElementById("origin").value;
const selectedDestination = document.getElementById("destination").value;
const distance = distances[selectedOrigin][selectedDestination];
const speed = 5.56;
...

I would consider holding all information in a JSON object or similar.
You can then dynamically populate the drop downs based on the object, including dynamically populating the destination drop down based on origin.
As we are populating the destination dynamically based on origin, we can save the lookup by putting the distance directly as the value of the destination options
//Object to hold info
//Adjust distances as required
const origins = {
"manila": {
"name": "Manilla",
"distances": {
"QC": 1000,
"makati": 2000,
"marikina": 3000
}
},
"QC": {
"name": "QC",
"distances": {
"manila": 1000,
"makati": 2000,
"marikina": 3000
}
},
"makati": {
"name": "Makati",
"distances": {
"manila": 2000,
"QC": 2000,
"marikina": 3000
}
},
"marikina": {
"name": "Marikina",
"distances": {
"manila": 3000,
"QC": 3000,
"makati": 3000
}
}
}
let originDD = document.getElementById("origin");
let destinationDD = document.getElementById("destination");
originDD.innerHTML = "<option value=''>Please Select</option>"
//Populate Origins
for (var prop in origins) {
originDD.innerHTML += `<option value=${prop}>${origins[prop].name}</option>`;
}
//Populate Destinations on change
originDD.addEventListener("change", function() {
var thisOrigin = this.value;
destinationDD.innerHTML = "<option value=''>Please Select</option>";
for (var dest in origins[thisOrigin].distances) {
console.log(dest);
console.log(origins[dest])
destinationDD.innerHTML += `<option value=${origins[thisOrigin].distances[dest]}>${origins[dest].name}</option>`
}
});
//Calculate on destination change
destinationDD.addEventListener("change", function() {
var distance = parseInt(this.value, 10);
var speed = 5.56; //converted speed from 20km/h
var time = distance / speed;
var eta = Math.floor(time).toString();
var estimatedTimeOfArrival = document.getElementById("estimatedTimeOfArrival");
console.log(eta)
if ((eta >= 60)) {
var newEta = eta / 60; //minutes
var mod = eta % 60; //seconds
newEta = Math.floor(newEta);
estimatedTimeOfArrival.value = newEta + "m " + mod + "s";
} else {
eta.toString();
estimatedTimeOfArrival.value = eta + " s";
}
document.querySelector("#eta > span").innerHTML = estimatedTimeOfArrival.value;
});
<form action="" id="findEta">
<select name="origin" id="origin">
</select>
<select name="destination" id="destination">
<option value="">Please Select Origin</option>
</select>
<input type="hidden" name="estimatedTimeOfArrival" id="estimatedTimeOfArrival">
<div id="eta">ETA: <span></span></div>
</form>

It looks like what you're after is the Travelling Salesman problem. It's considered a difficult problem to solve, and probably something beyond the scope of a regular Stack Overflow answer, especially if it's going to be 24 cities (not so bad for 4 cities).
A good place to start is the Branch and Bound algorithm, again by no means trivial. Basically given a starting cities, we work out how to branch out to subsequent available cities in such a way with the lowest "cost" (distance or time) till we arrive at the destination city.

innerHTML does not dynamically update nor display on PHP page - JavaScript

I have managed to dynamically display the sum of 6 line-cost DOM elements from a php file. Unfortunately, when trying to calculate the delivery charge, my JavaScript methods regarding to the deliveryCharge implementation fails to display anything on the page. With the sub-total methods working and displaying perfectly, I tried to troubleshoot the problem by providing innerHTML with a constant value of both a string and an int- both times yielded nothing to be displayed on screen.
I have displayed both the working part of the sub-total calculation method as well as the non-working part of the delivery-charge calculation. Would the problem lie within an incorrect way of using innerHTML, be a calculation error or a different error entirely?
function calcST(){
var i;
var sum = 0; // initialize the sum
let p = document.getElementsByTagName("line_cost");
for (i = 0; i < p.length; i++) {
if (!isNaN(Number(p[i].innerHTML))) {
sum = Number(sum + Number(p[i].innerHTML)); // p[i].innerHTML gives you the value
}
}
setST(sum, "sub_total");
}
function setST(sum, item_id){
let i = document.getElementById(item_id);
i.innerHTML = sum;
calcDelivCharge();
}
function getST() {
let i = document.getElementById("sub_total");
let v = i.innerHTML;
return v;
}
function calcDelivCharge(){
var delCharge;
var e = getST();
if(e < 100){
delcharge = e*0.10
}else{
delcharge = 0;
}
setDelivCharge("delivery_charge", delCharge);
}
function setDelivCharge(item_id, delCharge){
let i = document.getElementById(item_id);
i.innerHTML = delCharge;
calculateTAX();
}
function getDelivCharge() {
let i = document.getElementById("delivery_charge");
let v = i.innerHTML;
return v;
}

I managed to find that the DOM was not ready loading before the getST() method was called. This can be fixed with the following code:
if(document.getElementById("sub_total") != null){
let i = document.getElementById("sub_total");
let v = i.innerHTML;
return v;
}
Unfortunately, delivery-charge is seen as 'unidentified'. Why does this appear when the getST() method is altered?

Well, if you're HTML is like
<line_cost>
<div>30</div>
<div>40</div>
...
</line_cost>
You can do this:
function calcSubtotal() {
const costs = document.querySelector("line_cost").children;
let sum = 0;
for( let i = 0 ; i < costs.length ; i ++) {
sum += parseInt(costs[i].innerHTML);
}
setST(sum, "sub_total");
}
// Subtotal getter and setter
function setST(sum, item_id) {
document.getElementById(item_id).innerHTML = sum.toFixed(2);
calcDeliveryCharge();
}
function getSubTotal() {
return document.getElementById("sub_total").innerHTML;
}
function calcDeliveryCharge() {
const subTotal = getSubTotal();
setDeliveryCharge("delivery_charge", subTotal < 100 ? subTotal * 0.10 : 0);
}
function setDeliveryCharge(item_id, deliveryCharge){
document.getElementById(item_id).innerHTML = deliveryCharge.toFixed(2);
//calculateTAX();
}
function getDeliveryCharge() {
return document.getElementById("delivery_charge").innerHTML;
}
calcSubtotal();
calcDeliveryCharge();
<line_cost>
<div>5</div>
<div>4</div>
<div>3</div>
<div>20</div>
</line_cost>
<br/>
<div>
<span>Sub Total: $
<span id="sub_total"></span>
</span>
<br/>
<span>Delivery Charge: $
<span id="delivery_charge"></span>
</span>
</div>
Otherwise, if you have:
<div>
<line_cost>30</line_cost>
<line_cost>40</line_cost>
...
</div>
Then do this:
function calcSubtotal() {
const costs = document.querySelectorAll("line_cost");
let sum = 0
for( let i = 0 ; i < costs.length ; i ++) {
sum += parseFloat(costs[i].innerHTML);
}
setST(sum, "sub_total");
}
// Subtotal getter and setter
function setST(sum, item_id) {
document.getElementById(item_id).innerHTML = sum.toFixed(2);
calcDeliveryCharge();
}
function getSubTotal() {
return document.getElementById("sub_total").innerHTML;
}
function calcDeliveryCharge() {
const subTotal = getSubTotal();
setDeliveryCharge("delivery_charge", subTotal < 100 ? subTotal * 0.10 : 0);
}
function setDeliveryCharge(item_id, deliveryCharge){
document.getElementById(item_id).innerHTML = deliveryCharge.toFixed(2);
//calculateTAX();
}
function getDeliveryCharge() {
return document.getElementById("delivery_charge").innerHTML;
}
calcSubtotal();
calcDeliveryCharge();
line_cost {
display: block;
}
<div>
<line_cost>25</line_cost>
<line_cost>34</line_cost>
<line_cost>43</line_cost>
<line_cost>250</line_cost>
</div>
<br/>
<div>
<span>Sub Total: $
<span id="sub_total"></span>
</span>
<br/>
<span>Delivery Charge: $
<span id="delivery_charge"></span>
</span>
</div>

Price filter (min and max price) with a dropdown menu asp.net core

I'm trying to filter through prices using javascript and asp.net core, and I've come up with a heap of javascript which doesn't really work.
There has to be an easier way, using jquery or with c#?
If anyone has any suggestions it would be greatly appreciated!
Price Filter
<p>Sort By Price: </p>
<select id="sort" onChange="OnSelectedIndexChange()">
<option value="all">All</option>
<option value="1">$0 - $50</option>
<option value="2">$51 - $100</option>
<option value="3">$101 - $150</option>
<option value="4">$151 + </option>
</select>
<div class="row">
#{
foreach (var item in Model.Products)
{
if (item.CategoryId == Model.CategoryId)
{
<div class="card h-100" id="hamper">
<p id="price">$#item.Price</p>
</div>
}
}
}
</div>
</div>
<!-- Javascript -->
<script type="text/javascript">
var prices = [];
#foreach(var item in Model.Products)
{
#:prices.push(#item.Price)
}
function OnSelectedIndexChange() {
if (document.getElementById('sort').value == "all") {
document.getElementById("hamper").style.display = "block";
} else if (document.getElementById('sort').value == "1") {
for (var i = 0; i < prices.length; i++) {
if (prices[i] >= 0 && prices[i] <= 50 ) {
document.getElementById("hamper").style.display = "block";
} else {
document.getElementById("hamper").style.display = "none";
}
}
} else if (document.getElementById('sort').value == "2") {
for (var i = 0; i < prices.length; i++) {
if (prices[i] >= 51 && prices[i] <= 100) {
document.getElementById("hamper").style.display = "block";
} else {
document.getElementById("hamper").style.display = "none";
}
}
} else if (document.getElementById('sort').value == "3") {
for (var i = 0; i < prices.length; i++) {
if (prices[i] >= 101 && prices[i] <= 150) {
document.getElementById("hamper").style.display = "block";
} else {
document.getElementById("hamper").style.display = "none";
}
}
} else if (document.getElementById('sort').value == "4") {
for (var i = 0; i < prices.length; i++) {
if (prices[i] >= 150) {
document.getElementById("hamper").style.display = "block";
} else {
document.getElementById("hamper").style.display = "none";
}
}
}
}
</script>

There are multiple ways to handle it, in both client side and server side.
Here is a quick sample to do the filtering on client side.
First, add a data attribute to each option in the select to represent the corresponding price range. You may keep the value in this format "lowerRange:upperRange"
<select id="sort">
<option data-price="0:#Int32.MaxValue" value="all">All</option>
<option data-price="0:50" value="1">$0 - $50</option>
<option data-price="51:100" value="2">$51 - $100</option>
<option data-price="101:1000" value="3">$101 - 1000</option>
<option data-price="1001:#Int32.MaxValue" value="4">1001 + </option>
</select>
Now when you render each, card, give it a data attribute for storing the price (data-productprice)
<div class="row" id="my-products">
#foreach (var item in Model.Products.Where(a=>CategoryId==Model.CategoryId))
{
<div class="card h-100" data-productprice="#item.Price">
<span>#item.Name</span>
<span>#item.Price</span>
</div>
}
</div>
Now when user make a selection in the sort dropdown, get the data attribute of the selected option, read the lower and upper range, filter the card div's which has a productprice data attribute value which is falling in that range.
$(function () {
var $cards = $("#my-products").find("[data-productprice]");
$("#sort").change(function () {
var t = $(this).find(':selected').data('price');
var a = t.split(':');
var l = parseFloat(a[0]);
var u = parseFloat(a[1]);
$.each($cards, function (a, b) {
var p = parseFloat($(b).data("productprice"));
if (p >= l && p <= u) {
$(b).show();
} else {
$(b).hide();
}
});
});
});
As i mentioned, this is just one way of doing it, you can do the filtering on server side as well (which is something i might prefer).In that approach, you make an ajax call in the change event where you will send the lower and upper range (l and u) and let the server do a filtering based on the price range and return the partial view markup for only those items. When the ajax response comes back, you will replace the HTML of the my-products div.
$(function () {
$("#sort").change(function () {
var t = $(this).find(':selected').data('price');
var a = t.split(':');
var l = parseFloat(a[0]);
var u = parseFloat(a[1]);
var urlForFilteredResults = "/Products/List?priceFrom="+l+"&priceTo="+r;
// Add other filter criteria as needed
$("#my-products").load(urlForFilteredResults);
});
});
Assuming your List action method accepts the params and return a partial view result
I see in your code you are setting the same id value ( id="hamper") for all the cards inside the loop. That is invalid HTML. Your Id's should be unique in a document.

Make calculation based on information provided

I am building a website and I want to do calculations based on information provided. I obviously need to have information provided in two out of the three fields to calculate the third's value.
The three fields are:
Price Per Gallon
Gallons Bought
Total Sale
I obviously know that I can calculate the amount of gas bought by dividing the Total Sale amount by the Price Per Gallon.
However I want to calculate based on whatever two fields are entered. I am trying to find out the best way to do this.
I know this much:
Check to see which fields are empty
Determine which type of calculation to make
Here is what I have so far:
<form>
<input type="number" id="totalSale" placeholder="Total Sale Amount" class="calculate" />
<input type="number" id="gallonPrice" placeholder="Price Per Gallon" class="calculate" />
<input type="number" id="gallons" placeholder="Gallons" class="calculate" />
</form>
<script>
var e = document.getElementsByClassName("calculate");
function calc(){
var sale_amt = document.getElementById("totalSale");
var ppg = document.getElementById("gallonPrice");
var gallons = document.getElementById("gallons");
if (sale_amt || ppg !== null) {
var calc_gallons = sale_amt.value / ppg.value;
gallons.value = calc_gallons.toFixed(3);
}
}
for (var i = 0; i < e.length; i++) {
e[i].addEventListener('keyup', calc, false);
}
</script>

the logic should take into consideration which element is currently being entered (that will be this in calc). Also, you need to take into consideration what happens when all three have values, and you change one ... which of the other two should be changed?
See if this works for you
var sale_amt = document.getElementById("totalSale");
var ppg = document.getElementById("gallonPrice");
var gallons = document.getElementById("gallons");
function calc(){
var els = [sale_amt, ppg, gallons];
var values = [sale_amt.value, ppg.value, gallons.value];
var disabledElement = els.find(e=>e.disabled);
var numValues = els.filter(e => e.value !== '' && !e.disabled).length;
var calc_gallons = function() {
gallons.value = (values[0] / values[1]).toFixed(3);
};
var calc_ppg = function() {
ppg.value = (values[0] / values[2]).toFixed(3);
};
var calc_sale = function() {
sale_amt.value = (values[1] * values[2]).toFixed(2);
};
if (numValues < 3) {
if (numValues == 1 && disabledElement) {
disabledElement.disabled = false;
disabledElement.value = '';
disabledElement = null;
}
els.forEach(e => e.disabled = e == disabledElement || (numValues == 2 && e.value === ''));
}
disabledElement = els.find(e=>e.disabled);
switch((disabledElement && disabledElement.id) || '') {
case 'totalSale':
calc_sale();
break;
case 'gallonPrice':
calc_ppg();
break;
case 'gallons':
calc_gallons();
break;
}
}
var e = document.getElementsByClassName("calculate");
for (var i = 0; i < e.length; i++) {
e[i].addEventListener('keyup', calc, false);
e[i].addEventListener('change', calc, false);
}

How to make simple calculation with JavaScript to know travel time?

I'm stuck on this and it's so simple but I don't understand anything of JavaScript.
Basically I want to create a simple calculation to know the travel time, based on three different variables. I'm Dutch so some words are Dutch and some are English in the code. The first variable is the "woonplaats" which is the starting location. The second one is the "bestemming" which is the location of destination. The third one is the "vervoer" which is the vehicle you'll travel by.
Now all of these variables have a standard value. So the only thing that needs to be done is the calculation.
This is what my script code looks like:
function location() {
var woonplaats = document.getElementById("woonplaats").value;
switch (woonplaats) {
case "amstelveen":
locationAm();
break;
case "badhoevedorp":
poelBa();
break;
div2.innerHTML = "Jouw gemiddelde reistijd is: <b>" + tijd + "</b> km/h";
function locationAm() {
var e = document.getElementById("bestemming");
var eindbest = e.options[e.selectedIndex].value;
var x = document.getElementById("bestemming");
var vervoer = x.options[e.selectedIndex].value;
if (eindbest == ameer) {
var distance = 14500 ; }
else if (eindbest === groning) {
var distance = 183000 ; }
else if(eindbest === zwolle) {
var distance = 114000 ;
}
if (vervoer === kuruma ) {
var time = distance / 28 ;
}
else if (vervoer === jitensha) {
var time = var distance / 4 ;
}
else if ( vervoer === densha) {
var time = var distance / 56 ;
}
else if (vervoer === scoot) {
var time = var distance / 8 ; }
div2.innerHTML = "your travel time will be <b>" + time + "</b> km/h";
}
function locationBa() {
var e = document.getElementById("bestemming");
var eindbest = e.options[e.selectedIndex].value;
var x = document.getElementById("bestemming");
var vervoer = x.options[e.selectedIndex].value;
if (eindbest == ameer) {
var distance = 13000 ; }
else if (eindbest === groning) {
var distance = 40000 ; }
else if(eindbest === zwolle) {
var distance = 600000 ;
}
if (vervoer === kuruma ) {
var time = distance / 28 ;
}
else if (vervoer === jitensha) {
var time = var distance / 4 ;
}
else if ( vervoer === densha) {
var time = var distance / 56 ;
}
else if (vervoer === scoot) {
var time = var distance / 8 ; }
div2.innerHTML = "your travel time will be: <b>" + time + "</b>";
And this is my body
<form>
I live in <select id="woonplaats">
<option value="amstelveen">Amstelveen</option>
<option value="badhoevedorp">Badhoevedorp</option>
</select>
<p></p>
I'll travel to <select id="bestemming">
<option value="ameer">Aalsmeer</option>
<option value="groning">Groningen</option>
<option value="zwol">Zwolle</option>
</select>
<p></p>
My vehicle is <select id="vervoer">
<option value="kuruma">Auto</option>
<option value="jitensha">Fiets</option>
<option value="scoot">Scooter</option>
<option value="densha">Trein</option>
</select>
<p></p>
<p></p>
calculate time <input onclick="poel()" type="button" value="Bereken!">
</form>
<p> </p>
<div id="div2">your travel time will be.. gemiddelde ... km/h</div>
Basically the idea is that the first and the second variable decide the distance between them, and the vehicle decides at which speed you'll travel, so it should calculate the travel time.

That's an immense amount of code for a relatively simple problem.
You should encode the distances as data tables instead of logic, and put the vehicle speeds directly into the form as the value attribute of the individual option elements:
The code below does the whole thing:
var distances = {
amstelveen: {
ameer: 14500,
groning: 183000,
einbest: 11400
},
badhoevedorp: {
ameer: 13000,
groning: 40000,
zwolle: 600000
}
};
document.getElementById('calculate').addEventListener('click', function () {
var from = document.getElementById('woonplaats').value;
var to = document.getElementById('bestemming').value;
var speed = +document.getElementById('vervoer').value;
var distance = distances[from][to];
var time = distance / speed;
document.getElementById('div2').innerHTML = "your travel time will be: <b>" + time + "</b>";
}, false);
Demo at http://jsfiddle.net/alnitak/cwdhbk2x/