Why does a variable's equal 0 despite its real value is 1?-CodePudding

Press "YES" button and try to change the number by pressing "-" and " " buttons.

I'm getting an amount variable from html using next() method.

In both decrease and increase functions I console.log() the amount variable and for some reason it is equal 0 though its real value is 1. And also in the line 20 of js file I console.log() the number and its value is 1.

How to get the number correctly?

$(function() {
  function decrease() {
    let amount = Number($(this).next().next().children("div").eq(1).text());
    console.log(amount);
    if (amount - 1 >= 1) {
      Number($(this).next().next().children("div").eq(1).text(amount - 1));
    }
  }

  function increase() {
    let amount = Number($(this).next().next().children("div").eq(1).text());
    console.log(amount);
    $(this).next().next().children("div").eq(1).text(amount   1);
  }

  let flag = false
  
  $(".yes").click(function() {
    if (flag === false) {
      $(this).css("background", "rgb(255, 74, 74)");
      $(this).next().next().css("opacity", 1);
      console.log(Number($(this).next().next().children("div").eq(1).text()));
      $(this).next().next().children("div").eq(0).bind("click", decrease);
      $(this).next().next().children("div").eq(2).bind("click", increase);
      $(this).next().next().children("div").eq(0).css("cursor", "pointer");
      $(this).next().next().children("div").eq(2).css("cursor", "pointer");
      flag = true;
    } else {
      $(this).css("background", "transparent");
      $(this).next().next().css("opacity", 0.5);
      $(this).next().next().children("div").eq(0).unbind("click", decrease);
      $(this).next().next().children("div").eq(2).unbind("click", increase);
      $(this).next().next().children("div").eq(0).css("cursor", "default");
      $(this).next().next().children("div").eq(2).css("cursor", "default");
      flag = false;
    }
  });
});

.product-list {
  display: grid;
  grid-template-rows: 97px 97px 97px;
  grid-template-columns: 150px 1fr auto 1fr auto;
  /* max-width: 1200px; */
  /* row-gap: 25px; */
}

.product-list .name,
.product-list .indent1,
.product-list .yes,
.product-list .indent2,
.product-list .selector {
  margin-bottom: 25px;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.yes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #222;
  padding: 0 5px;
  cursor: pointer;
}

.selector {
  /* grid-area: selector; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
  opacity: 0.5;
}

.selector div:nth-child(1) {
  border: 1px solid #222;
}

.selector div:nth-child(3) {
  border: 1px solid #222;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form >
  <div >
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
  <div >
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
  <div >
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
</form>

https://codepen.io/CodingNinja619/pen/LYeVRXL

CodePudding user response：

Your selectors for the result text (amount) are wrong and they are not pulling the right text. This is why it fails to do manipulation or set the text

You need to change the selectors in both increase() and decrease() functions

FROM

$(this).next().next().children("div").eq(1).text()

$(this).next().text() //for decrease as element is next to it
$(this).prev().text() //for increase as element is before

Working Code below

$(function() {
  function decrease() {
    let amount = Number($(this).next().text());
    console.log(amount);
    if (amount - 1 >= 1) {
      Number($(this).next().text(amount - 1));
    }
  }

  function increase() {
    let amount = Number($(this).prev().text());
    console.log("y"   amount);
    $(this).prev().text(amount   1);
  }

  let flag = false
  $(".yes").click(function() {
    if (flag === false) {
      $(this).css("background", "rgb(255, 74, 74)");
      $(this).next().next().css("opacity", 1);
      console.log(Number($(this).next().next().children("div").eq(1).text()));
      $(this).next().next().children("div").eq(0).bind("click", decrease);
      $(this).next().next().children("div").eq(2).bind("click", increase);

      $(this).next().next().children("div").eq(0).css("cursor", "pointer");
      $(this).next().next().children("div").eq(2).css("cursor", "pointer");

      flag = true;
    } else {
      $(this).css("background", "transparent");
      $(this).next().next().css("opacity", 0.5);
      $(this).next().next().children("div").eq(0).unbind("click", decrease);
      $(this).next().next().children("div").eq(2).unbind("click", increase);

      $(this).next().next().children("div").eq(0).css("cursor", "default");
      $(this).next().next().children("div").eq(2).css("cursor", "default");

      flag = false;
    }
  });
});

.product-list {
  display: grid;
  grid-template-rows: 97px 97px 97px;
  grid-template-columns: 150px 1fr auto 1fr auto;
  /* max-width: 1200px; */
  /* row-gap: 25px; */
}

.product-list .name,
.product-list .indent1,
.product-list .yes,
.product-list .indent2,
.product-list .selector {
  margin-bottom: 25px;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.yes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #222;
  padding: 0 5px;
  cursor: pointer;
}

.selector {
  /* grid-area: selector; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
  opacity: 0.5;
}

.selector div:nth-child(1) {
  border: 1px solid #222;
}

.selector div:nth-child(3) {
  border: 1px solid #222;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form >
  <div >
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

  <div >
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

  <div >
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div ></div>
  <div >
    <div>YES</div>
  </div>
  <div ></div>
  <div >
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

</form>