-1

I Have a slider that has a number output associated with it. I am able to apply the color for all the number, but it doesn't change when the slider value goes to a different color range.

document.body.addEventListener("change", color());

function color() {
  if (document.getElementById("strengthLevel").innerHTML < 31) {
    document.getElementById("outpu").style.color = "Green";
  } else if (document.getElementById("strengthLevel").innerHTML < 55) {
    document.getElementById("outpu").style.color = "Yellow";
  } else {
    document.getElementById("outpu").style.color = "Red";
  }
}
<div class="form-group" oninput="outpu.value=strengthLevel.value, color()">

  <label for="strengthLevel">Caffeine Rating </label> <label> <output id="outpu">30</output></label>

  <input name="strength" id="strengthLevel" type="range" value="30">

</div>

<button type="submit" class="btn btn-default">Submit</button>

<button type="reset" class="btn btn-default">Reset</button>

</form>

</div>

</div>

<div class="panel panel-default">

  <div class="panel-body">

    <h4>Pending Orders:</h4>

    <div data-coffee-order="checklist">

    </div>

  </div>

</div>

</section>

I tired this code and I am only able to make the text green

David Thomas
  • 249,100
  • 51
  • 377
  • 410
ke emon
  • 3
  • 1
  • 3
    please add revelant HTML [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) – Chris G Jan 12 '23 at 14:48
  • I've converted your posted HTML into a running example, except that it can't run because you're missing the a lot of the opening elements, for example the `
    ` and `
    `, which means that your reset button doesn't work (and neither does the submit, but you probably don't want that to work here, so you may want to change the `type` to `type="button"` for the demo code here). Please, as you've been kindly asked already, take some time to help us work with your problems, and post the relevant (albeit minimal, functioning) HTML in your question
     – David Thomas Jan 12 '23 at 14:52
  • 1
    Use `value` instaed of `innerHTML` – angel.bonev Jan 12 '23 at 14:54
  • yup, just changing your `innerHTML` for `value` solves the entire problem – Chris G Jan 12 '23 at 14:57
  • Should be: `document.body.addEventListener("change", color);` - **do not execute like** `document.body.addEventListener("change", color());` – Roko C. Buljan Jan 12 '23 at 14:59

1 Answers1

1

From what I can see in your example code, you're adding the change event listener to the body. Try to add it to your slider instead.

An example:

<input type="range" min="0" max="100" id="testSlider" />

<div id="testOutput">Test</div>

<script>
let testSlider = document.querySelector("#testSlider");
let testOutput = document.querySelector("#testOutput");

function changeColor() {
    let value = testSlider.value;
    let colorValue = "green";
    
    if(value < 30) { colorValue = "orange"; }
    if(value < 10) { colorValue = "red"; }

    testOutput.style.color = colorValue;
}

testSlider.addEventListener("change", changeColor);
</script>
Laura Sofia Heimann
  • 91
  • 4