Back

Technologies:

javascriptjavascript
jqueryjquery
avatar
Tolerim
a month ago

How can I adjust the size using JavaScript (JQuery)?

Here's a problem I'm trying to solve: I need to resize multiple boxes using JavaScript or jQuery. I wrote some code that does this by adding or removing a class to the box. Although the code works fine, it only affects the first box and not the rest of them. Here's my code: 

let Box = document.querySelector(".box");
let btnone = document.querySelector(".btnone");

btn_one.addEventListener("click", function () {
        $(Box).removeClass("box_two");
        $(Box).removeClass("box_three");
})

let btntwo = document.querySelector(".btntwo");

btn_two.addEventListener("click", function () {
        $(Box).addClass("box_two");
        $(Box).removeClass("box_three");
})

let btnthree = document.querySelector(".btnthree");

btn_three.addEventListener("click", function () {
        $(Box).addClass("box_three");
        $(Box).removeClass("box_two");
})
I believe the issue is that the code only targets the first box. Can you suggest a solution using jQuery or JavaScript that will work for all boxes, not just the first one? Here's the HTML for the boxes:
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You are correct that the issue is that the code only targets the first box. Here is a solution using jQuery that will work for all boxes: 
<section class="main-BOX">

    <button class="btn_one">1</button>
    <button class="btn_two">2</button>
    <button class="btn_three">3</button>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

</section>

<script>
    let btn_one = document.querySelector(".btn_one");
    let btn_two = document.querySelector(".btn_two");
    let btn_three = document.querySelector(".btn_three");

    btn_one.addEventListener("click", function () {
        $(".box").removeClass("box_two box_three");
    });

    btn_two.addEventListener("click", function () {
        $(".box").addClass("box_two").removeClass("box_three");
    });

    btn_three.addEventListener("click", function () {
        $(".box").addClass("box_three").removeClass("box_two");
    });
</script>
This code uses jQuery to target all boxes with the .box class instead of just the first one. The removeClass() method removes the classes box_two and box_three from all boxes when the first button is clicked. The addClass() method adds the class box_two to all boxes and removes the class box_three from all boxes when the second button is clicked. The addClass() method adds the class box_three to all boxes and removes the class box_two from all boxes when the third button is clicked. I hope this helps! Let me know if you have any other questions.

Sources

https://stackoverflow.com/questions/76143948/resize-with-javascript-jquery
avatar
Tolerim
a month ago
The reason why only the first box is being affected by the code you wrote is that you are using document.querySelector method, which only selects the first matching element it finds. In order to target all the boxes, you need to use document.querySelectorAll instead of document.querySelector. This will give you a NodeList of all the .box elements. Then, you can loop through the NodeList and apply the same class changes to each element. Here's an updated code snippet that should work: 
let boxes = document.querySelectorAll(".box");
let btn_one = document.querySelector(".btn_one");

btn_one.addEventListener("click", function () {
    boxes.forEach(function (box) {
      box.classList.remove("box_two");
      box.classList.remove("box_three");
    });
});

let btn_two = document.querySelector(".btn_two");

btn_two.addEventListener("click", function () {
    boxes.forEach(function (box) {
      box.classList.add("box_two");
      box.classList.remove("box_three");
    });
});

let btn_three = document.querySelector(".btn_three");

btn_three.addEventListener("click", function () {
    boxes.forEach(function (box) {
      box.classList.add("box_three");
      box.classList.remove("box_two");
    });
});
In this code, document.querySelectorAll is used to select all the .box elements, which are stored in the boxes variable. Then, the forEach method is used to loop through each element in the boxes NodeList and apply the necessary class changes.
;