Basic Input/output Help For Online Calculator I Am Developing
Beginner coder here. I am currently developing a website for calculating various equations, but I need help with user input. On the HTML, I currently wrote up the following code.
Solution 1:
This is what you're after I suspect :)
HTML
<section><!--- Celsius, Fahrenheit, Kelvin --><table><tr><td>°C</td><td>°F</td><td>°K</td></tr><tr><td><inputtype="number"id="celsius"/></td><tdid="fahr1"></td><tdid="kelv1"></td></tr><tr><tdid="celc2">-</td><td><inputtype="number"id="fahrenheit" /></td><tdid="kelv2">-</td></tr></table></section>JQuery
//Hook into an event where if an input of type number changes
$('input[type=number]').change(function() {
//If the name of the input that has changed is celsiusif($(this).attr('id') == 'celsius'){
//Call a function to get the current value using $(this).val()//Update the text inside the relevant td's by calling a function
$('#fahr1').text(celsiusToFahrenheit($(this).val()));
$('#kelv1').text(celsiusToKelvin($(this).val()));
}
//If the name of the input that has changed is fahrenheitelseif($(this).attr('id') == 'fahrenheit'){
//Call a function to get the current value using $(this).val()//Update the text inside the relevant td's by calling a function
$('#celc2').text(fahrenheitToCelsius($(this).val()));
$('#kelv2').text(fahrenheitToKelvin($(this).val()));
}
});
functioncelsiusToFahrenheit(c) {
var f = parseInt(c);
f = f * (9/5) + 32;
return f;
}
functioncelsiusToKelvin(c) {
var k = parseInt(c);
k = k + 273.15;
return k;
}
functionfahrenheitToCelsius(f) {
var c = parseInt(f);
c = (c - 32) * (5/9);
return c;
}
functionfahrenheitToKelvin(f) {
var k = parseInt(f);
k = (k + 459.67) * (5/9);
return k;
}
Please note! You should put this in a <script></script> section in the top of your HTML. An example can be seen here: W3 Schools Script example
Similarly don't forget to reference JQuery in your <head></head> section. An example can be seen here: W3 Schools Reference JQuery
See it working live here:https://jsfiddle.net/cwr1hm9v/1/
EDIT As per request, here is the Javascript equivalent
HTML
<section><!--- Celsius, Fahrenheit, Kelvin --><table><tr><td>°C</td><td>°F</td><td>°K</td></tr><tr><td><inputtype="number"id="celsius"/></td><tdid="fahr1"></td><tdid="kelv1"></td></tr><tr><tdid="celc2">-</td><td><inputtype="number"id="fahrenheit" /></td><tdid="kelv2">-</td></tr></table></section>JavaScript
const celsius = document.getElementById('celsius');
const fahrenheit = document.getElementById('fahrenheit');
celsius.addEventListener('change', (event) => {
convertFromCelsius();
});
fahrenheit.addEventListener('change', (event) => {
convertFromFahrenheit();
});
functionconvertFromCelsius() {
var fahr1 = document.getElementById("fahr1");
var kelv1 = document.getElementById("kelv1");
fahr1.textContent = parseInt(celsius.value) * (9/5) + 32;
kelv1.textContent = parseInt(celsius.value) + 273.15;
}
functionconvertFromFahrenheit() {
var celc2 = document.getElementById("celc2");
var kelv2 = document.getElementById("kelv2");
celc2.textContent = (parseInt(fahrenheit.value) - 32) * (5/9);
kelv2.textContent = (parseInt(fahrenheit.value) + 459.67) * (5/9);
}
See it working live here:https://jsfiddle.net/0Luvq4nx/1/
Please mark this as accepted if this solves your issue.
Post a Comment for "Basic Input/output Help For Online Calculator I Am Developing"