我正在开发的在线计算器的基本输入/输出帮助 [英] Basic Input/Output help for online calculator I am developing
问题描述
此处是初学者. 我目前正在开发一个用于计算各种方程式的网站，但是我需要用户输入方面的帮助. 在HTML上，我目前编写了以下代码.
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.
<section>
<!--- Celsius, Fahrenheit, Kelvin -->
<table>
<tr>
<td>°C</td>
<td>°F</td>
<td>°K</td>
</tr>
<tr>
<td> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td>later</td>
<td> <input type="number" id="fahrenheit"/> </td>
<td>later</td>
</tr>
</table>
</section>
我将如何更改第二行和第三行以更改用户输入的内容，而不必按下提交按钮?我将如何访问用户提供给我的输入，以便将其操纵为表中相应位置的输出?
How would I go about changing the second and third row to change along with what the user inputs without having them have to press a submit button? How would I access the input that the user has given me in order to manipulate it into an output in the corresponding spot in the table?
推荐答案
这就是我怀疑的目的:)
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> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td id="celc2">-</td>
<td> <input type="number" id="fahrenheit" /> </td>
<td id="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 celsius
if($(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 fahrenheit
else if($(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()));
}
});
function celsiusToFahrenheit(c) {
var f = parseInt(c);
f = f * (9/5) + 32;
return f;
}
function celsiusToKelvin(c) {
var k = parseInt(c);
k = k + 273.15;
return k;
}
function fahrenheitToCelsius(f) {
var c = parseInt(f);
c = (c - 32) * (5/9);
return c;
}
function fahrenheitToKelvin(f) {
var k = parseInt(f);
k = (k + 459.67) * (5/9);
return k;
}
请注意！您应该将其放在HTML顶部的<script></script>部分中.在此处可以看到一个示例: W3学校脚本示例
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
同样，不要忘记在<head></head>部分中引用JQuery.可以在此处看到一个示例: W3学校参考JQuery
Similarly don't forget to reference JQuery in your <head></head> section. An example can be seen here: W3 Schools Reference JQuery
在此处实时查看它的运行情况: https://jsfiddle.net/cwr1hm9v /1/
编辑
根据要求，这是等效的Javascript
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> <input type="number" id="celsius"/> </td>
<td id="fahr1"></td>
<td id="kelv1"></td>
</tr>
<tr>
<td id="celc2">-</td>
<td> <input type="number" id="fahrenheit" /> </td>
<td id="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();
});
function convertFromCelsius() {
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;
}
function convertFromFahrenheit() {
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);
}
在此处实时查看它的运行情况: https://jsfiddle.net/0Luvq4nx /1/
See it working live here: https://jsfiddle.net/0Luvq4nx/1/
如果这可以解决您的问题，请标记为接受.
Please mark this as accepted if this solves your issue.
这篇关于我正在开发的在线计算器的基本输入/输出帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
