Issue
I would like to output in a div the result of a math calculation (subtract). In the specific I have a form with a <input type="time" id="time" name="time">
that let user pick up a time. I would like to display in another div the result of the chosen time - 3 Hours.
So if time chosen is 13:00 I would like to output in the div
with class
result-1 10:00.
How can I achieve this in JS?
<form action="/action_page.php">
<label>Time:</label>
<input type="time" id="time" name="time">
</form>
<div>
<h1>Dispaly the result of Time - 3 Hours</h1>
<div class="result-1">Result</div>
</div>
What I tried is to replicate what explained here but without result?
Solution
When you read data from the <input>
element, the math library cannot be used directly because it reads data of type String
. So I developed two different solutions that exhibit two different behaviours.
Behaviour-1
The following solution extracts the selected time value based on a time stored in the secondTime
array.
const time1 = document.getElementById('time1');
let result = document.getElementById('result');
// If you want to calculate the difference to the fixed time point,
// change the contents of the secondTime array.
let firstTime = []; secondTime = ["03", "00"]
// Function that prints the time difference to the DOM
function calculate() {
if(firstTime.length != 0) {
var hours = firstTime[0] - secondTime[0];
var minutes = firstTime[1] - secondTime[1];
result.innerHTML = "";
result.insertAdjacentHTML("beforeend", `${hours}:${minutes}`);
}
}
// Event fired when <input> element changes
time1.onchange = function() {
firstTime = this.value.split(":");
calculate();
}
#result {
color: red;
}
<form action="/action_page.php">
<label>First Time:</label>
<input type="time" id="time1" name="time">
</form>
<div>
<h1>Dispaly the result of Time - 3 Hours</h1>
<div class="result-1">Result: <span id="result"></span></div>
</div>
Behaviour-2
In the solution below, the value in the <input>
element is parsed using the String.prototype.split()
method and the time difference is calculated using the calculate()
method. Edit the calculate()
method for more accurate calculation.
const time1 = document.getElementById('time1');
const time2 = document.getElementById('time2');
let result = document.getElementById('result');
let firstTime = [], secondTime = [];
function calculate() {
if(firstTime.length != 0 && secondTime.length != 0) {
var hours = secondTime[0] - firstTime[0];
result.innerHTML = "";
result.insertAdjacentHTML("beforeend", `${hours} Hours`);
}
}
time1.onchange = function() {
firstTime = this.value.split(":");
calculate();
}
time2.onchange = function() {
secondTime = this.value.split(":");
calculate();
}
#result {
color: red;
}
<form action="/action_page.php">
<label>First Time:</label>
<input type="time" id="time1" name="time">
<label>Second Time:</label>
<input type="time" id="time2" name="time">
</form>
<div>
<h1>Dispaly the result of Time - 3 Hours</h1>
<div class="result-1">Result: <span id="result"></span></div>
</div>
Answered By - Sercan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.