I'm trying to create an application that works out the speed by using the maths formula of distance / time.
I'm struggling to find the code that takes the time in the correct format from the three input boxes I've created. I get given the correct answer with hours input value but when i add on the minutes and seconds values it doesn't quite work. I know there's huge thing i'm missing with the time fields in my code but i can't quite figure out the solution to it. My code is below and i'd really appreciate a solution and even more, the logic behind the solution.:)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>Speed Calculator</h1>
<div speedcalc>
<label for="distance"><b>Distance:</b></label>
<input type="number" id="distanceInput">
<select>
<option value="miles">Miles</option>
<option value="kilometres">Kilometres</option>
</select>
<br>
<br>
<label for="number"><b>Time</b></label>
<label for="number">Hours: </label>
<input type="number" id="hoursInput">
<label for="number">Minutes: </label>
<input type="number" id="minutesInput">
<br>
<br>
<label for="number">Seconds: </label>
<input type="number" id="secondsInput">
<br>
<br>
<button id="averageSpeedBtn">Average Speed</button>
<br>
<br>
<p></p>
</div>
<script src="app.js" async defer></script>
</body>
</html>
let distance = document.getElementById('distanceInput');
let hours = document.getElementById('hoursInput');
let minutes = document.getElementById('minutesInput');
let seconds = document.getElementById('secondsInput');
const distanceSelect = document.querySelector('select');
const averageSpeedBtn = document.getElementById('averageSpeedBtn');
const para = document.querySelector('p');
averageSpeedBtn.addEventListener('click', function speed() {
let mile = distance.value;
let time = hours.value + minutes.value + seconds.value;
let formula = mile / time;
para.textContent = 'average speed : ' + formula;
});
The reason you are not getting right value is, the input value which you receive is a string, So you need to convert it into a number using parseInt like,
let time = (+hours.value) + (+minutes.value) + (+seconds.value)
And the snippet as follows,
let distance = document.getElementById('distanceInput');
let hours = document.getElementById('hoursInput');
let minutes = document.getElementById('minutesInput');
let seconds = document.getElementById('secondsInput');
const distanceSelect = document.querySelector('select');
const averageSpeedBtn = document.getElementById('averageSpeedBtn');
const para = document.querySelector('p');
averageSpeedBtn.addEventListener('click', function speed() {
let mile = distance.value;
let time = (+hours.value) + (+minutes.value) + (+seconds.value)
let formula = mile / time;
para.textContent = 'average speed : ' + formula;
});<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>Speed Calculator</h1>
<div speedcalc>
<label for="distance"><b>Distance:</b></label>
<input type="number" id="distanceInput">
<select>
<option value="miles">Miles</option>
<option value="kilometres">Kilometres</option>
</select>
<br>
<br>
<label for="number"><b>Time</b></label>
<label for="number">Hours: </label>
<input type="number" id="hoursInput">
<label for="number">Minutes: </label>
<input type="number" id="minutesInput">
<br>
<br>
<label for="number">Seconds: </label>
<input type="number" id="secondsInput">
<br>
<br>
<button id="averageSpeedBtn">Average Speed</button>
<br>
<br>
<p></p>
</div>
<script src="app.js" async defer></script>
</body>
</html>Eventhough your question was about making the input string into number and @Alex point it out in comments, You could also consider the time as real time by making the time variable with following,
let time = (+hours.value) + (+minutes.value) / 60 + (+seconds.value) / 3600