I have a variable count that triggers a function positiveBar if the value of count is > 0. If the value of count is < 0, it triggers a function negativeBar.

positiveBar changes a div's position using

progressBar.style.left = '50%';

negativeBar changes that same div's position using

progressBar.style.right = '50%';

This gives me the result I want; however, if at any point count becomes greater than 0, the positioning on negativeBar stops working, and it uses the positioning of the positiveBar function instead.

Video to explain:

var count = 0;

// Show count on the page
document.getElementById("countDisplay").innerHTML = count;

// Update count
function updateDisplay() {
  countDisplay.innerHTML = count;
};

// Change negative count to an absolute
function absCount() {
  return Math.abs(count);
};

function positiveBar() {
  progressBar.style.backgroundColor = "#77eb90";
  progressBar.style.width = (count * 10)   'px';
  progressBar.style.left = '50%';
};

function negativeBar() {
  progressBar.style.backgroundColor = "#ef5c3f";
  progressBar.style.width = (absCount() * 10)   'px';
  progressBar.style.right = '50%';
};

// Count up and down when   and - buttons are clicked and edit bar
add1.addEventListener("click", () => {
  count  ;
  updateDisplay();
  if (count > 0) {
    positiveBar();
  } else {
    negativeBar();
  }
});

subtract1.addEventListener("click", () => {
  count--;
  updateDisplay();
  if (count > 0) {
    positiveBar();
  } else {
    negativeBar();
  }
});

.progressBar__Container {
  height: 10px;
  margin: 20px auto;
  border: 1px solid black;
  position: relative;
}

#progressBar {
  height: 10px;
  width: 0;
  position: absolute;
}

<div id="countDisplay"></div>

<button id="add1"> </button>
<button id="subtract1">-</button>

<div >
  <div id="progressBar">&nbsp;</div>
</div>

I tried reordering statements. I also tried creating a condition for if count = 0, but that didn't change the result. I'm very confused because it initially works how I intend, but if count becomes greater than 0 at any point, progressBar.style.right = '50%'; stops being applied.

CodePudding user response：

You aren't clearing any previously set left or right styles when you switch from negative to positive and vice versa.

I would use CSS classes to control the position and colour as it's easier to toggle them based on the state of count.

let count = 0;
const countDisplay = document.getElementById("countDisplay");
const progressBar = document.getElementById("progressBar");

// Update count
function updateDisplay() {
  countDisplay.textContent = count;
  progressBar.style.width = `${absCount() * 10}px`;
  progressBar.classList.toggle("positive", count > 0);
  progressBar.classList.toggle("negative", count < 0);
};

// Change negative count to an absolute
function absCount() {
  return Math.abs(count);
};

// Count up and down when   and - buttons are clicked and edit bar
add1.addEventListener("click", () => {
  count  ;
  updateDisplay();
});

subtract1.addEventListener("click", () => {
  count--;
  updateDisplay();
});

.progressBar__Container {
  height: 10px;
  margin: 20px auto;
  border: 1px solid black;
  position: relative;
}

#progressBar {
  height: 10px;
  width: 0;
  position: absolute;
}

#progressBar.positive {
  background-color: #77eb90;
  left: 50%;
}

#progressBar.negative {
  background-color: #ef5c3f;
  right: 50%;
}

<div id="countDisplay">0</div>

<button id="add1"> </button>
<button id="subtract1">-</button>

<div >
  <div id="progressBar">&nbsp;</div>
</div>

CodePudding user response：

See MDN:

When both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both — for example, if a width is declared — the position of the element is over-constrained. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

Because you are setting style.left when you then come to set style.right the above applies - i.e. the style.right setting will get overridden.