Changing CSS style of a class with Javascript
Question
I'm new to javascript and I'm coding a temperiture converter. The program is basically done except im trying to make it so that the color of the text changes depending on the value of the temperiture. Eg: its 3 Degrees celcius so the text is blue to show that it's cold.
I added a class called temperiture to all of the I want the colour to change on. I've tried document.getElementByClassName aswell as document.QuerySelector.
The class 'temperature' has not been touched in the CSS file
This error is shown twice for the same line:
//Creating the funtion to convert celcius function celciusConverter() { const cTemp = parseFloat(celciusInput.value); //Working out celcius to farenheight const fTemp = (cTemp * (9/5) + 32); //Working out celcius to kelvin const kTemp = (cTemp + 273.15); //Displaying the temperiture in all formats farenheightInput.value = fTemp; kelvinInput.value = kTemp; if (cTemp < 15){ document.getElementsByClassName('#temperature')[0].style.color='black'; } } //Refreshing the screen when a number is put in celciusInput.addEventListener('input', celciusConverter);
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body{ background: black; } div{ height: 33.333vh; } #Farenheight{ border-top: 5px; border-bottom: 5px; } input[type=number]{ outline: none; width: 100%; height 100%; background: black; color: white; font-size: 6em; text-align: centre; border: 0; font-family: Oswald, sans-serif; }
<body> <div id="celcius" class"temperature"> <input type="number" placeholder="Celcius. . ."> </div> <div id="farenheight" class"temperature"> <input type="number" placeholder="Farenheight. . ."> </div> <div id="kelvin" class"temperature"> <input type="number" placeholder="Kelvin. . ."> </div> </body>
Uncaught TypeError: Cannot read property 'style' of undefined at HTMLInputElement.celciusConverter
2 answers
solution1
1 ACCPTED 2019-07-07 01:04:57
The reason why the color change was not working is because your temperature class was on the divs wrapping the inputs, and form items (inputs/textarea/etc) don't inherit font information from their parent by default. Using querySelectorAll , you can use the input[type=number] selector, just like you did in your css.
const celciusInput = document.querySelector("#celcius > input"); const farenheightInput = document.querySelector("#farenheight > input"); const kelvinInput = document.querySelector("#kelvin > input"); //Creating the funtion to convert celcius function celciusConverter() { const cTemp = parseFloat(celciusInput.value); //Working out celcius to farenheight const fTemp = (cTemp * (9/5) + 32); //Working out celcius to kelvin const kTemp = (cTemp + 273.15); //Displaying the temperiture in all formats farenheightInput.value = fTemp; kelvinInput.value = kTemp; document.querySelectorAll('input[type=number]').forEach(function (node) { if (cTemp < 15) { node.style.color = 'blue'; } else { node.style.color = 'red'; } }) } //Refreshing the screen when a number is put in celciusInput.addEventListener('input', celciusConverter);
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; } body{ background: black; } div{ height: 33.333vh; } #Farenheight{ border-top: 5px; border-bottom: 5px; } input[type=number]{ outline: none; width: 100%; height 100%; background: black; color: white; font-size: 6em; text-align: centre; border: 0; font-family: Oswald, sans-serif; }
<body> <div id="celcius" class"temperature"> <input type="number" placeholder="Celcius. . ."> </div> <div id="farenheight" class"temperature"> <input type="number" placeholder="Farenheight. . ."> </div> <div id="kelvin" class"temperature"> <input type="number" placeholder="Kelvin. . ."> </div> </body>
solution2
-1 2019-07-06 23:26:27
The selector is incorrect. Don't put the # in front of the class name. getElementsByClassName just expects a string identical to the class name.
if (cTemp < 15){
document.getElementsByClassName('temperature')[0].style.color='black';
}
even better, I like to use querySelectorAll instead, which expects css like selectors. I also assume you want to update the style of all of the .temperature elements. You can iterate over all of them instead of only updating the first one.
document.querySelectorAll('.temperature').forEach(function (node) {
if (cTemp < 15) {
node.style.color = 'blue';
} else {
node.style.color = 'red';
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.