JavaScript Help - Temperature conversion App

I am trying to add more conversions. I would appreciate any help. Try to add the following:

look below

What help specifically do you need? You already have implemented some of the conversions. Implementing the rest should be about the same thing (i.e. create a function to do each conversion).

everything i have done. It errors out and the originally two do not work. Can you show me how to do two of them (Fahrenheit to Kelvin and Celsius to Kelvin). Once I see how you multiple them then I could do the last two. I am trying to learn on my own and I confused at the moment.

I know all the mathematical calculations. Its the coding that gets me.

I get to this point but i cant figure out how to add “Convert Kelvin”. Look at this update code.

HTML

<font size="4" color="white">Please choose conversion option<BR></font> 
<input type="button" id="f_to_c_to_k" value="Convert Fahrenheit" />
<input type="button" id="c_to_f_to_k" value="Convert Celsius" />
<input type="button" id="k_to_f_to_c" value="Convert Kelvin" />
</p>
<Font size="5" color="white">
<p id="result"></p>
<script src="temp.js"></script>
</font>
    </div>        

temp.js file

    document.getElementById("result").innerHTML =
        Number(celsius).toFixed(2) + "\xb0C = " + Number(fahrenheit).toFixed(2) + "\xb0F = " + Number(kelvin).toFixed(2) + "\xb0K";
};

function toCelsius (f) {
    return (f - 32) / 1.8;
}

function toFahrenheit (c){
    return 1.8 * c + 32;
}



document.getElementById("f_to_c_to_k").onclick = function () {
    var f = document.getElementById("temperature").value;
    if (isNaN(f)) {
        document.getElementById("result").innerHTML = "Please enter a numeric value!";
        document.getElementById("temperature").value = "";
        document.getElementById("temperature").focus();
    }
    else {
        var c = toCelsius(f); // ("Business") Logic
        report(c, f);
    }
};

document.getElementById("c_to_f_to_k").onclick = function () {
    var c = document.getElementById("temperature").value;
    if (isNaN(c)) {
        document.getElementById("result").innerHTML = "Please enter a numeric value!";
        document.getElementById("temperature").value = "";
        document.getElementById("temperature").focus();
    }
    else {
        var f = toFahrenheit(c); // ("Business") Logic
        report(c, f);
    }
    
     

};```

To start, if you paste code into this forum you need to enclose it in triple backticks. If you click the </> icon above the editor it will help you do this. So please go back to your original post and do this.

From what I can tell, it looks like you might be using an editor that is using fancy double quotes instead of ascii double quotes, which will not work in JS. So you need to use an actual coding editor (like visual code studio) which will use the correct double quotes (or you could figure out how to turn off those fancy double quotes with whatever you are using).

the convert button does not work. When I try to add the function and document for kelvin in the js file. The script stops working.

The results for Covert Fahrenheit and Celsius shows a NaN as Kelvin

Updated the files. figure switching to just these three options would be easier. When i try to put the fuction and document part the whole thing stops working.

HTML

<input type="text" placeholder="Numeric value only!" STYLE="text-align: center" id="temperature" /><P>
        
    <font size="4" color="white">Please choose conversion option<BR></font> 
    <input type="button" id="f_to_c_to_k" value="Convert Fahrenheit" />
    <input type="button" id="c_to_f_to_k" value="Convert Celsius" />
    <input type="button" id="k_to_f_to_c" value="Convert Kelvin" />
    </p>
    <Font size="5" color="white">
    <p id="result"></p>
    <script src="temp.js"></script>
    </font>
        </div>

temp.js file

var report = function (celsius, fahrenheit, kelvin) {
    document.getElementById('result').innerHTML =
        Number(celsius).toFixed(2) + '\xb0C = ' + Number(fahrenheit).toFixed(2) + '\xb0F = ' + Number(kelvin).toFixed(2) + '\xb0K';
};

function toCelsius (f) {
    return ((f - 32) / 1.8)
}

function toFahrenheit (c){
    return 1.8 * c + 32;
}



document.getElementById('f_to_c_to_k').onclick = function () {
    var f = document.getElementById('temperature').value;
    if (isNaN(f)) {
        document.getElementById('result').innerHTML = 'Please enter a numeric value!';
        document.getElementById('temperature').value = '';
        document.getElementById('temperature').focus();
    }
    else {
        var c = toCelsius(f); // ("Business") Logic
        report(c, f);
    }
};

document.getElementById('c_to_f_to_k').onclick = function () {
    var c = document.getElementById('temperature').value;
    if (isNaN(c)) {
        document.getElementById('result').innerHTML = 'Please enter a numeric value!';
        document.getElementById('temperature').value = '';
        document.getElementById('temperature').focus();
    }
    else {
        var f = toFahrenheit(c); // ("Business") Logic
        report(c, f);
    }   

};

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

@syxx34 What exactly are you trying to achieve with the 3 buttons. If a user enters a number in the textbox, what unit is it supposed to represent. You need a way to let the user add a number in one textbox and maybe a radio button group that the user can specify the unit of the number entered (i.e. Celsius, Fahrenheit, Kelvin). Then if the user enters a value and selects the Fahrenheit radio button, two buttons appear (Convert to Kelvin and Convert to Celsius`. When the applicable button is clicked, you would show the converted value and the unit in a different location of the page.

Another approach would be to have a single Convert button such that if the user enters a value and selects the Fahrenheit radio button, two conversions are displayed somehwere else on the page (one for Celsius and one for Kelvin).

Thank you. I am learning and I will read it. I tried to edit it many times.

I am just trying to create a temperature conversion to where I input a value in the box. I convert Fahrenheit, Celsius and Kelvin. I want it to show the results. Trying to learn jquery. I want the results to display the following:

value inserted shows the other two conversion.
Examples would be:

Fahrenheit to show Celsius and Kelvin.
Celsius to show Fahrenheit and Kelvin.
Kelvin to show Fahrenheit and Celsius.

The problem is, you can not convert to another unit unless you know what the original unit for the value entered is.

Also, I do not see any jQuery being used at all, which is why I changed your topic title.

With your current approach of only having the user enter a value, you will need to have buttons that say “Convert Fahrenheit to Celsius”, “Convert Fahrenheit to Kelvin”, “Convert Celsius to Fahrenheit”, “Convert Celsius to Kelvin”, "“Convert Kelvin to Fahrenheit”, and “Convert Kelvin to Celsius”,

the button are within the html part.

If this is not jquery then i truly need help.

is there any possible way to do a jquery for what i am asking for. If so can someone help me. Can anyone help me?

You can use jQuery if you like but it will not do anything that JS by itself can’t do (jQuery just makes some things a little more convenient). If you want to use jQuery then you have to start by including it in your HTML file:

I would just concentrate on getting one conversion to work first. Also, you need to fix up your HTML code. For example, there is no font tag in HTML5. Use a starter template for your HTML file: