Skip to content Skip to sidebar Skip to footer
Home / Html / Input / Javascript / Output / User Interface

Basic Input/Output Help For Online Calculator I Am Developing

Post a Comment
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>&#176C</td>
       <td>&#176F</td>
       <td>&#176K</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;
}

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>&#176C</td>
       <td>&#176F</td>
       <td>&#176K</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);
}

See it working live here: https://jsfiddle.net/0Luvq4nx/1/

Please mark this as accepted if this solves your issue.


You may like these posts

Post a Comment for "Basic Input/Output Help For Online Calculator I Am Developing"