Why my position(right) property does not change in JavaScript

Question

According to my code , I want to change the position of my element(.counter-eclipse-num) if (cartNum < 10) But it does not change ! I just want it to move a little bit .

However If (cartNum > 10) in addCartNum() function, it changes ! where is the problem ?

I've added my HTML & JavaScript Code you can take a look.

 let cartNumStr = document.querySelector('.counter-eclipse-num').innerText; let cartNum = Number(cartNumStr); document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum <10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } }); function addCartNum() { cartNum = cartNum + 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum > 9){ document.querySelector('.counter-eclipse-num').style.right = "2.2px"; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="Header.CSS"> <link rel="stylesheet" href="Style.CSS"> <link rel="stylesheet" href="Footer.CSS"> <script src="https://kit.fontawesome.com/38b3678073.js" crossorigin="anonymous"></script> <script src="/JS/main.js" async></script> <title>خانه | PCGA</title> </head> <body> <header> <div class="polygon-cart" id = "cart"> <i class="fas fa-shopping-cart" id="cart-icon"></i> <div class="counter-eclipse"> <p class="counter-eclipse-num">0</p> </div> <div class="main-cart-content-container" id = "main-cart-content-container"> </div> <div class="cart-info-top"> <button class="cart-checkout-btn">تسویه نهایی</button> <span class="cart-whole-price">جمع مبلغ سبد خرید شما : <span class = "sum-price">0</span> هزارتومان</span> </div> </div> <img src="img/Final-Logo.png" alt="Final-Logo" class="Final-Logo" height="171px" width="500px"> <div class="SearchContainer"> <table class="SearchTable"> <tr> <td> <input type="text" placeholder="Search" class="SearchBar"> </td> <td> <a href="#"><i class="SearchIcon"></i></a> </td> </tr> </table> </div> <nav class="nav-top"> <ul> <a href="/index.html"><li>خانه</li></a> <div class="nav-products"> <a href="#"><li>محصولات</li></a> <ul class = products-dropdown-content> <a href="/Products-Origin.html"><li>(Origin) اوریجین</li></a> <a href="/Products-Steam.html"><li>(Steam) استیم</li></a> <a href="/Products-Uplay.html"><li>(Uplay) یوپلی</li></a> </ul> </div> <a href="#"><li>تماس با ما</li></a> <a href="#"><li>درباره ما</li></a> </ul> </nav> </header> <div class = 'products-container'> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">150</span> هزار تومان</div> </div> <section class='product-title'> <h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1> </section> <div class="product-des"> <table class="info-table"> <tr> <th>ضمانت</th> <th>قابلیت تغییر اطلاعات</th> <th>پلتفرم</th> </tr> <tr> <td>5 ساله سبز</td> <td>دارد</td> <td>یوپلی</td> </tr> </table> <button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button> </div> </div> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">520</span> هزار تومان</div> </div> <section class='product-title'> <h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1> </section> <div class="product-des"> <table class="info-table"> <tr> <th>ضمانت</th> <th>قابلیت تغییر اطلاعات</th> <th>پلتفرم</th> </tr> <tr> <td>5 ساله سبز</td> <td>دارد</td> <td>یوپلی</td> </tr> </table> <button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button> </div> </div> <div class='product-1'> <div class="product-img-container"> <img src="/img/BFV.jpg" class='product-img'> <div class = 'product-price'>قیمت : <span class="real-price">750</span> هزار تومان</div> </div> </body> </html>

Here is the CSS code requested:

 .counter-eclipse{ position: absolute; width: 18px; height: 18px; right: 7px; top: -78px; background: #DAD8C7; border-radius: 100%; transition: .3s; } .counter-eclipse-num{ position: absolute; right: 5px; top: -12px; font-family: 'Roboto'; font-style: normal; font-weight: normal; font-size: 15px; line-height: 14px; color: #FF0000; transition: .3s; }

Answer 1

Looks like the positioning does work if under some conditions the element moves. Have you checked if this (cartNum < 10) condition is ever true? First off, I would recommend to put a debugger or a console.log() inside it and check out your console in Dev Tools to find out whether cartNum is less than 10.

If it is, and the positioning is still not working, please check the CSS applied to the element you're trying to move. Make sure that the right property is there, has a correct value and is not overlapped by something else.

Hope it helps! Anyway, let us know if you have some more information. You might try to share a screenshot of the Elements tab of your Dev Tools so that we could see if you have any styling issue.

Answer 2

Ok , I answered my own question ! The only thing that I needed to do was to add the if condition to my first if in the code below (pay attention to my old and my new code ) :

NEW CODE :

 document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; cartRealPrice = container.querySelector('.cart-real-price').innerText; sumPrice = sumPrice - cartRealPrice; document.querySelector('.sum-price').innerText = sumPrice; if (cartNum < 10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; container.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum < 10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } });

OLD CODE :

 document.querySelector(".polygon-cart").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("fa-trash")) { const container = tgt.closest(".cart-content-container"); let qty = container.querySelector(".cart-qty").value; if (qty < 2){ container.remove(); cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; } else { qty = qty -1; container.querySelector(".cart-qty").value = qty; cartNum = cartNum - 1; document.querySelector('.counter-eclipse-num').innerText = cartNum; if (cartNum <10) { document.querySelector('.counter-eclipse-num').style.right = "5.2px"; } } } });

Why my position(right) property does not change in JavaScript

Question

2 answers

solution1
0 2021-07-20 10:56:56

solution2
0 ACCPTED 2021-07-23 10:47:34

Why my position(right) property does not change in JavaScript

Question

2 answers

solution1 0 2021-07-20 10:56:56

solution2 0 ACCPTED 2021-07-23 10:47:34

solution1
0 2021-07-20 10:56:56

solution2
0 ACCPTED 2021-07-23 10:47:34