ARTICLE AD BOX
I am trying to make a temperature converter that automatically changes value when the user changes the input and clicks elsewhere (using the onChange in my html file) in javascript, but when i type in the input and click outside the input box nothing changes. the problem seems to be from the js but i dont know where to look into, Expected: after putting an input in either of the input boxes the values in other input boxes changes Actual: after making input the values dont show or even change.
Let me know if i should provide more code or context
const celciusInput = document.getElementById("celcius"); const farenInput = document.getElementById("faren"); const kelvinInput = document.getElementById("kelvin"); function trial(event){ const computeTrial = +event.target.value; switch (event.target.name) { case "celcius": kelvinInput.value = (computeTrial + 273.15).toFixed(2); farenInput.value= ((computeTrial * 18)+32).toFixed(2); break; case "kelvin": celciusInput.value =(computeTrial - 273.15).toFixed(2); farenInput.value = (computeTrial - 273.15).toFixed(2); break; case "faren": kelvinInput.value = (computeTrial - 32).toFixed(2); farenInput.value = (computeTrial- 32).toFixed(2); break; default: break; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Js project minis</title> <link rel="stylesheet" href="styles.css"> </head> <body> <section> <div class="container"> <h1>Temprature converter</h1> <div class="temp-container"> <label for="celcius" > Celcius: </label> <input type="number" onchange="trial(event)" id="celcius" placeholder="Enter temprature" recquired> </div> <div class="temp-container"> <label for="Fahrenheit" > Fahrenheit: </label> <input type="number" id="faren" onchange="trial(event)" placeholder="Enter temprature" recquired> </div> <div class="temp-container"> <label for="Kelvin" > Kelvin: </label> <input type="number"id="kelvin" onchange="trial(event)" placeholder="Enter temprature" recquired> </div> </div> </section> <script src="scripts.js"></script> </body> </html>please look into it
46.5k12 gold badges81 silver badges134 bronze badges
Explore related questions
See similar questions with these tags.
