I have a 4 div elements each with their own value, for example 0. I have a button with a plus and minus that changes the value in each box. I also have a set next button so you can do the same thing to the next box.

The problem I'm facing is how to select the next div and change the value with the same plus and minus buttons and then selecting the next div and doing the same until you're at the end. It then has to return to the first div. Here is my code:

<div class="code_div">
    <div class="code_area">
        <p id="number1">00</p>
    </div>
    <div class="code_area2">
        <p id="number2">00</p>
    </div>
    <div class="code_area3">
        <p id="number3">00</p>
    </div>
    <div class="code_area4">
        <p id="number4">00</p>
    </div>

var value = 0;
var plus = false;
var minus = false;

$(document).ready(function() {
    $('#set_next').click(function() {
    });

    $('#minus').click(function() {
        minus = false;
        plus = true;
        if (plus == true) {
            value -= 5;
        }
        displayValue()
    });

    $('#plus').click(function() {
        minus = true;
        plus = false;
        if (minus == true) {
            value += 5;
        }
        displayValue() 
    });
});

function displayValue() {
    document.getElementById("number1").innerHTML = value;
}

Can anyone help me?

I have a 4 div elements each with their own value, for example 0. I have a button with a plus and minus that changes the value in each box. I also have a set next button so you can do the same thing to the next box.

The problem I'm facing is how to select the next div and change the value with the same plus and minus buttons and then selecting the next div and doing the same until you're at the end. It then has to return to the first div. Here is my code:

<div class="code_div">
    <div class="code_area">
        <p id="number1">00</p>
    </div>
    <div class="code_area2">
        <p id="number2">00</p>
    </div>
    <div class="code_area3">
        <p id="number3">00</p>
    </div>
    <div class="code_area4">
        <p id="number4">00</p>
    </div>

var value = 0;
var plus = false;
var minus = false;

$(document).ready(function() {
    $('#set_next').click(function() {
    });

    $('#minus').click(function() {
        minus = false;
        plus = true;
        if (plus == true) {
            value -= 5;
        }
        displayValue()
    });

    $('#plus').click(function() {
        minus = true;
        plus = false;
        if (minus == true) {
            value += 5;
        }
        displayValue() 
    });
});

function displayValue() {
    document.getElementById("number1").innerHTML = value;
}

Can anyone help me?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 10, 2015 at 11:38 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 10, 2015 at 11:31 Julian FaulJulian Faul 6577 bronze badges 6

• Where are the plus and minus buttons? Can you provide a jsFiddle – Taleeb Commented Nov 10, 2015 at 11:34
• sorry there they are... ill try to create a js fiddle quicly – Julian Faul Commented Nov 10, 2015 at 11:35
• <button id="plus" class="btn btn-primary btn-sm">plus</button> <button id="set_next" class="btn btn-primary btn-sm">Set Next</button> <button id="minus" class="btn btn-primary btn-sm">minus</button> – Julian Faul Commented Nov 10, 2015 at 11:35
• [link] (jsfiddle/z4ukhvt4) – Julian Faul Commented Nov 10, 2015 at 11:40
• i dont know why my plus and minus doesnt work on jsfiddle but on my machine it works fine – Julian Faul Commented Nov 10, 2015 at 11:41

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

Keep it simple. You have a list of divs, so use a list instead. Even if you want to keep your original markup, this should give an idea on how to implement this.

var $items = $('ul li'),
    qtItems = $items.length,
    activeItem = 0;

$('#setnext').click(function () {
  $items.removeClass('active').eq(++activeItem % qtItems).addClass('active');
});
                   
$('#plus, #minus').click(function () {
  var currvalue = $items.eq(activeItem % qtItems).text();
  this.id === 'plus' ? currvalue++ : currvalue--;
  $items.eq(activeItem % qtItems).text(currvalue);
});

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  margin: 0 1em;
  padding: 1em;
  background-color: green;
  opacity: .5;
}

li.active {
  opacity: 1;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
</ul>

<button id="setnext">set next</button>
<button id="plus">plus</button>
<button id="minus">minus</button>

But, if you cannot simplify your markup, here is another simple solution using your original html.
As you can see, you don't need all of those classes and ids.

var value = 0;
var plus = false;
var minus = false;
var index=1;
$( document ).ready(function() {

$('#set_next').click(function() {
index++;
//update
$("#number"+index).css("color","blue");
if(index==5){
index=1;
}
});

 $('#minus').click(function() {
       minus = false;
       plus = true;
        if (plus == true){
        value -= 5;
    }
displayValue()
    });

 $('#plus').click(function() {
       minus = true;
       plus = false;
    if (minus == true){
         value += 5;
    }
displayValue() 
    });
});

function displayValue(){
        document.getElementById("number"+index).innerHTML = value;
}

Although your code needs a lot of polishing (i can give you a cleaner approach if you want) https://jsfiddle/cbw4zc55/ something along these lines? html code:

<div class="code_div">
<div class="code_area">
<p id="number1">00</p>
</div>
<div class="code_area2">
<p id="number2">00</p>
</div>
<div class="code_area3">
<p id="number3">00</p>
</div>
<div class="code_area4">
<p id="number4">00</p>
</div>
    <button id="set_next">set next</button>
    <button id="minus">minus</button>
    <button id="plus">plus</button>

javascript:

var current = 1;
    var max = 4;

    var value = 0;
    var plus = false;
    var minus = false;
    $( document ).ready(function() {

    $('#set_next').click(function() {
        if( current < max )
        {
            current+=1;
        }
        else
        {
            current = 1;
        }
     value = parseInt($("#number"+current).text());
    });

     $('#minus').click(function() {

           minus = false;
           plus = true;
            if (plus == true){
            value -= 5;
        }

    displayValue()

        });


     $('#plus').click(function() {

           minus = true;
           plus = false;
        if (minus == true){
             value += 5;
        }
    displayValue() 

        });

    });


    function displayValue(){

            document.getElementById("number"+current).innerHTML = value;

    }

EDIT: Note that you would need to recalculate the current element value each time you change your focus to a new one (aside from that the selected answer is just perfect as well)