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

The class is "temperature", but you've specified "#temperature". Try removing the "#". — showdev, Jul 06 '19 at 23:15
When is your function supposed to be invoked? You aren't calling it from anywhere. — Scott Marcus, Jul 06 '19 at 23:15
FYI: [Don't use `getElementsByClassName()`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). — Scott Marcus, Jul 06 '19 at 23:16
If using [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [specify a class](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Class_selectors) with a dot, like `querySelector('.temperature')`. The ["#" indicates an ID](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#ID_selectors). — showdev, Jul 06 '19 at 23:23
Okay I've just tried document.querySelector('.temperature').style.color='red'; I get "Uncaught TypeError: Cannot read property 'style' of null at HTMLInputElement.celciusConverter (app.js:28)" PS: The function is called later on with an eventListener on input — Joel, Jul 07 '19 at 00:33

François Huppé · Accepted Answer · 2019-07-07T01:19:21.707

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>

Thank you so much this worked. But why did querySelector not let me use querySelectorAll('.temperature') to change the class? Also I did have the variables declared up top. I didnt include them in the post: //Initialising the variables const celciusInput = document.querySelector("#celcius > input"); const farenheightInput = document.querySelector('#farenheight > input'); const kelvinInput = document.querySelector('#kelvin > input'); But what does the .childnodes(1) when declaring them? — Joel, Jul 07 '19 at 01:18
See my edit, your querySelectorAll('.temperature') was working, only changing the divs color does not affect the inputs — François Huppé, Jul 07 '19 at 01:20
also, document.querySelector('.temperature') returns an array, this is why you need a forEach loop, and this is why document.querySelector('.temperature').style.color='red'; was returning an error. — François Huppé, Jul 07 '19 at 01:24
Okay so instead of changing the color of the input box text, it was changing the color of the div. And that isnt a visible change. And without a for loop then only the first div would (invisibly) change colour. Thanks so much for the help — Joel, Jul 07 '19 at 01:29

score -1 · Answer 2 · answered Jul 06 '19 at 23:26

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';
    }
  })

How would i go about fixing this? With the answer lyjackal gave me I dont get any errors but the colors of the text do not change — Joel, Jul 07 '19 at 00:48

Changing CSS style of a class with Javascript

2 Answers2