I Have A Problem With Writing One Js And Setting It To Multiple Divs With Same Id

19 December 2019 - 1 answer

hi so this is my js and the problem i have is my js works fine with the first div but it has no effect on the other divs, and i cant seem to find whats the problem. i guess i know what the problem is the only issue i have is i dont know how to solve it, i would appreciate it if u could help me this is my js:

var incrementerHandle = document.querySelector('.incrementer .value');
var incrementValue = document.querySelector('.incrementer .value span');
var downButton = document.querySelector('.incrementer .down');
var upButton = document.querySelector('.incrementer .up');
var peek = document.querySelector('.incrementer .peek'); //Handle Bounds

var neutral = '50%';
var upper = 50;
var lower = 10; //Count Bounds

var count = 0;
var minCount = 0;
var maxCount = 100; //Timer for holding

var timer;
downButton.addEventListener('click', incrementDown);
upButton.addEventListener('click', incrementUp);


function dragEndHandler() {
    peek.classList.remove('active');
    checkPosition();
    clearInterval(timer); //Return to neutral

    incrementerHandle.style.left = neutral;
}

function timerTick() {
    peek.classList.add('active');
    checkPosition();
}

function checkPosition() {
    if (dragger.position.x >= upper) {
        incrementUp();
    } else if (dragger.position.x <= lower) {
        incrementDown();
    }
}

function incrementUp() {

    count++;

    if (count > maxCount) {
        count = maxCount;
    }

    updateValue();
}

function incrementDown() {

    count--;

    if (count < minCount) {
        count = minCount;
    }

    updateValue();
}

function updateValue() {
    incrementValue.innerHTML = count;
    checkDisplay();
}

function checkDisplay() {
    if (count <= minCount) {
        downButton.classList.add('disabled');
    } else if (count >= maxCount) {
        upButton.classList.add('disabled');
    } else {
        downButton.classList.remove('disabled');
        upButton.classList.remove('disabled');
    }
}

<div class="slider">
    <div class="incrementer">
        <button class="mdc-button mdc-button--raised up">
            <span class="mdc-button__ripple">+</span>
        </button>
        <button class="value">
            <span>0</span>

        </button>

        <button class="mdc-button mdc-button--raised down">
            <span class="mdc-button__ripple">-</span>
        </button>
    </div>
</div>

Answer

Based on your explanation on the comment line, you have multiple divs with class slider with similar implementation as the one you posted. In this case you would have to use querySelectorAll() which returns a node list, rather than using querSelector() which returns a single element. I have made a few more adjustments accordingly.

var downButton = document.querySelectorAll('.incrementer .down');
var upButton = document.querySelectorAll('.incrementer .up');
var peek = document.querySelector('.incrementer .peek'); //Handle Bounds

var neutral = '50%';
var upper = 50;
var lower = 10; //Count Bounds

var minCount = 0;
var maxCount = 100; //Timer for holding

var timer;

downButton.forEach( down => down.addEventListener('click', incrementDown));
upButton.forEach( up => up.addEventListener('click', incrementUp));


function dragEndHandler() {
    peek.classList.remove('active');
    checkPosition();
    clearInterval(timer); //Return to neutral

    incrementerHandle.style.left = neutral;
}

function timerTick() {
    peek.classList.add('active');
    checkPosition();
}

function checkPosition() {
    if (dragger.position.x >= upper) {
        incrementUp();
    } else if (dragger.position.x <= lower) {
        incrementDown();
    }
}

function incrementUp(e) {
    let element = e.target;
    let count = 0;
    if( element.classList.contains('mdc-button') ){
        count = Number( element.nextElementSibling.firstElementChild.innerHTML ) + 1;

        if (count > maxCount) {
            count = maxCount;
        }
        
        element.nextElementSibling.firstElementChild.innerHTML = count;   
        checkDisplay(count, element);   
    }
    else {
        count = Number( element.parentElement.nextElementSibling.firstElementChild.innerHTML ) + 1;

        if (count > maxCount) {
            count = maxCount;
        }
        
        element.parentElement.nextElementSibling.firstElementChild.innerHTML = count;
        checkDisplay(count, element.parentElement);
    }

}

function incrementDown(e) {

    let element = e.target;
    let count = 0;
    if( element.classList.contains('mdc-button') ){
        count = Number( element.previousElementSibling.firstElementChild.innerHTML ) - 1;

        if (count < minCount) {
            count = minCount;
        }
        
        element.previousElementSibling.firstElementChild.innerHTML = count;      
        checkDisplay(count, element);
    }
    else {
        count = Number( element.parentElement.previousElementSibling.firstElementChild.innerHTML ) - 1;

        if (count < minCount) {
            count = minCount;
        }
        
        element.parentElement.previousElementSibling.firstElementChild.innerHTML = count;
        checkDisplay(count, element.parentElement);
    }
}

function checkDisplay(count, element) {
    if (count <= minCount) {
        element.classList.add('disabled');
    } else if (count >= maxCount) {
        element.classList.add('disabled');
    } else {
        element.classList.remove('disabled');
        element.classList.remove('disabled');
    }
}

#con{
    border: 1px solid black;
    padding: 10px;
    width: 65%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}
#con1{
    border: 1px solid black;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 5px;
}
button{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
select{
      margin-top: 20px;
  }
.redbu{
      background-color: red;
  }
.bluebu{
    background-color: royalblue;
}
.greenbu{
    background-color: #4CAF50;
}
.yellowbu{
    background-color: yellow;
}

<div class="slider">
    <div class="incrementer">
        <button class="mdc-button mdc-button--raised up">
            <span class="mdc-button__ripple">+</span>
        </button>
        <button class="value">
            <span>0</span>

        </button>

        <button class="mdc-button mdc-button--raised down">
            <span class="mdc-button__ripple">-</span>
        </button>
    </div>
</div>
<div class="slider">
    <div class="incrementer">
        <button class="mdc-button mdc-button--raised up">
            <span class="mdc-button__ripple">+</span>
        </button>
        <button class="value">
            <span>0</span>

        </button>

        <button class="mdc-button mdc-button--raised down">
            <span class="mdc-button__ripple">-</span>
        </button>
    </div>
</div>
<div class="slider">
    <div class="incrementer">
        <button class="mdc-button mdc-button--raised up">
            <span class="mdc-button__ripple">+</span>
        </button>
        <button class="value">
            <span>0</span>

        </button>

        <button class="mdc-button mdc-button--raised down">
            <span class="mdc-button__ripple">-</span>
        </button>
    </div>
</div>

source: stackoverflow.com

← Previous Post

I Have A Problem With Writing One Js And Setting It To Multiple Divs With Same Id

19 December 2019 - 1 answer

Answer

Related Questions