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

Issue

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 class="product-list">
  <div class="name">
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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 class="name">
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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 class="name">
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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

Solution

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()

To

$(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 class="product-list">
  <div class="name">
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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 class="name">
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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 class="name">
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <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>

Answered By – Tushar

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.