function javascript plus and minus-CodePudding

I'm making plus and minus changing in javascript The problem is the plus function just ran once but minus function is fine.

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://athena3140.ml/style.css">
  </head>
  <body>
    <div id="container" >
      <!--first-->
      <div  onclick="leftm()">
        <div >
          <div>&#8722;</div>
        </div>
        <div onclick="left()">
          <div  id="left">0</div>
        </div>
      </div> 
    <script>
      let x = document.getElementById("left").innerHTML;
      
      function left() {
        document.getElementById("left").innerHTML = x  ;
      }
      function leftm() {
        document.getElementById("left").innerHTML = x--;
      }
    </script>
  </body>
</html>

CodePudding user response：

There are two issues:

The first onclick is on an element that has both the minus and the number, so when you click on the number, this container element will also receive that event and call a function that counters the effect. The solution is to move that onclick attribute to the smaller container that only wraps around the minus.
x-- will still return the value of x without subtraction. That actual assignment to x of the decremented value happens after that evaluation. Same for x . So use prefix notation instead.

let x = document.getElementById("left").innerHTML;

function left() {
  document.getElementById("left").innerHTML =   x;
}
function leftm() {
  document.getElementById("left").innerHTML = --x;
}

<link rel="stylesheet" href="https://athena3140.ml/style.css">
<div id="container" >
  <!--first-->
  <div  >
    <div  onclick="leftm()">
      <div>&#8722;</div>
    </div>
    <div onclick="left()">
      <div  id="left">0</div>
    </div>
  </div>

CodePudding user response：

Your current markup is very confusing.

If you want to be able to both increment and decrement the value, each of the buttons need to exist as separate concepts. It would also help if they were siblings.

To simplify your markup, you should have a container that holds a decrement button, a value for display, and an increment button.

Adding (or subtracting) 1 from the display value can be performed in a utility function that takes the current innerText, parses it, adds a value, and then sets the innerText on the element.

const valueEl = document.querySelector('.value');

const addValue = (el, value) =>
  el.innerText = parseInt(el.innerText, 10)   value;

const increment = () => addValue(valueEl, 1);
const decrement = () => addValue(valueEl, -1);

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { display: flex; align-items: center; justify-content: center; }
.container { display: flex; gap: 1rem; align-items: center; }
.action { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; cursor: pointer; border: thin solid grey; }
.decrement:after { content: '\2212'; }
.increment:after { content: '\002B'; }
.value { font-size: 1.5rem; font-weight: bold; }

<div >
  <div  onClick="decrement()"></div>
  <div >0</div>
  <div  onClick="increment()"></div>
</div>