Can javascript decrease an html value when it’s already going up?


I can’t find a way for when the value is over 180 (using an if statement), it starts going down as a negative, for example: when the value is over 180, the element with the id "text" becomes -179 then as the slider goes farther, it becomes up to -1.
Here is my code;

var slider = document.getElementById("slider");

slider.addEventListener('input', () => {

  document.getElementById("text").innerHTML = slider.value;
  document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
  var tv = document.getElementById("text").innerHTML;
  if (slider.value > 180) {
    neg();
  }; //else when it goes back
  function neg() { //stack overflow how to
    document.querySelector("#text").innerHTML = Math.floor(-slider.value + 360 / 2);
  }
});
body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#outer {
  background: red;
  height: 20vw;
  position: relative;
  border-radius: 50%;
  width: 20vw;
  display: flex;
  justify-content: center;
}

#inner {
  transform: rotateZ(180deg) translateY(10%);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  position: absolute;
  top: 0;
  background: darkgreen;
  width: 10%;
  height: 50%;
}

#text {
  text-align: center;
  width: 3ch;
}

.item {
  border: 2px solid black;
}
<div class="item" id="outer">
  <div id="inner"></div>
</div>
<input class="item" value="0" min="0" max="360" type="range" id="slider">
<div id="text" class="item" style="background-color:lightgrey;padding-inline:1vw;border-radius:10%;border:1vh solid black;">
  0
</div>

Right now, it resets at -0 instead of -179.
Sorry if the code is messy, because I have been experimenting to figure this out.

Source: CSS – Stack Overflow

November 24, 2021
Category : News
Tags: css | DOM | html | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.