What I don't understand is why does my code not change the text of the label when the radio is selected?
This is what is suppose to happen:
Which when 'Fahrenheit to Celsius' is selected the first image should be true (the text of the first and second label should change)
When 'Celsius to Fahrenheit' is selected the second image should be true (the text of the first and second label should change)
What I'm guessing is my problem is with the if ($("input:to_celsius").val() == "true") statement but I don't quite know why it's wrong.
***Current error message: { "message": "Uncaught TypeError: Cannot set property 'onclick' of null", "filename": "https://stacksnippets.net/js", "lineno": 69, "colno": 30 }
"use strict";
var $ = function(id) { return document.getElementById(id); };
var clearTextBoxes = function() {
$("#degrees_entered").value = "";
$("#degrees_computed").value = "";
};
window.onload = function() {
$("#to_celsius").onclick = toCelsius;
$("#to_fahrenheit").onclick = toFahrenheit;
$("#degrees_entered").focus();
};
// Change the text of label 1 and 2 when the radio 'Celsius to Fahrenheit' is selected and clears all other inputs
var toFahrenheit = function() {
if ($("#to_fahrenheit").val() == "true") {
$("#degree_labl_1").text("Enter C degrees");
$("#degree_label_2").text("Degrees Fahrenheit");
clearTextBoxes();
}
}
// Change the text of label 1 and 2 when the radio 'Fahrenheit to Celsius' is selected and clears all other inputs
var toCelsius = function() {
if ($("#to_celsius").val() == "true") {
$("#degree_labl_1").text("Enter F degrees");
$("#degree_label_2").text("Degrees Celsius");
clearTextBoxes();
}
}body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 450px;
border: 3px solid blue;
}
h1 {
color: blue;
margin: 0 0 .5em;
}
main {
padding: 1em 2em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
}
input {
margin-bottom: .5em;
}
#convert {
width: 10em;
}<!DOCTYPE html><html><head><meta charset="utf-8"><title>Convert Temperatures</title><link rel="stylesheet" href="styles.css"><script src="convert_temp.js"></script><script src="jquery-3.4.1.min.js"></script></head><body><main><h1>Convert temperatures</h1> <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br><input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br><label id="degree_label_1">Enter F degrees:</label><input type="text" id="degrees_entered"><br><label id="degree_label_2">Degrees Celsius:</label><input type="text" id="degrees_computed" disabled><br><label> </label><input type="button" id="convert" value="Convert" /><br> </main></body></html>