Picking the following div using a button and updating its content

Question

Picking the following div using a button and updating its content

I am currently working on a project that involves 4 div elements, each with its own value (for example: 0). There is also a button with plus and minus functionality to change the values in each box. Additionally, there is a "set next" button to move on to the next box and repeat the process.

The challenge I am facing is how to efficiently select the next div, update its value using the same plus and minus buttons, and then move on to the subsequent div until reaching the end. The process should then loop back to the first div. Below is an excerpt of 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;
}

If anyone has any insights or suggestions on how to tackle this issue, I would greatly appreciate it!

javascript jquery html css

Answer 1

Answer №1

Keeping it simple is key here. Instead of using a list of divs, opt for a list element. Even if you prefer to stick with your current markup, this example should provide some insight on how to execute 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.com/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>

If simplifying your markup isn't an option, here's another straightforward solution using your initial html structure. In this version, unnecessary classes and ids are eliminated for a cleaner approach.

Answer 2

Keeping it simple is key here. Instead of using a list of divs, opt for a list element. Even if you prefer to stick with your current markup, this example should provide some insight on how to execute 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.com/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>

If simplifying your markup isn't an option, here's another straightforward solution using your initial html structure. In this version, unnecessary classes and ids are eliminated for a cleaner approach.

Answer 3

Answer №2

let number = 0;
let add = false;
let subtract = false;
let counter=1;
$( document ).ready(function() {

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

 $('#minus').click(function() {
       subtract = false;
       add = true;
        if (add == true){
        number -= 5;
    }
displayNumber()
    });

 $('#plus').click(function() {
       subtract = true;
       add = false;
    if (subtract == true){
         number += 5;
    }
displayNumber() 
    });
});

function displayNumber(){
        document.getElementById("number"+counter).innerHTML = number;
}

Answer 4

let number = 0;
let add = false;
let subtract = false;
let counter=1;
$( document ).ready(function() {

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

 $('#minus').click(function() {
       subtract = false;
       add = true;
        if (add == true){
        number -= 5;
    }
displayNumber()
    });

 $('#plus').click(function() {
       subtract = true;
       add = false;
    if (subtract == true){
         number += 5;
    }
displayNumber() 
    });
});

function displayNumber(){
        document.getElementById("number"+counter).innerHTML = number;
}

Answer 5

Answer №3

Although your code could use some refining (I can suggest a cleaner approach if you're interested) Check this out on JSFiddle Does something like this work for you? Here's the 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: Remember to recalculate the value of the current element whenever you switch focus to a new one (other than that, the chosen solution is also great)

Answer 6

Although your code could use some refining (I can suggest a cleaner approach if you're interested) Check this out on JSFiddle Does something like this work for you? Here's the 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: Remember to recalculate the value of the current element whenever you switch focus to a new one (other than that, the chosen solution is also great)

Picking the following div using a button and updating its content

Answer №1

Answer №2

Answer №3

Similar questions

Having issues with ajax posting functionality

How does the AngularJS Dependency Injection system determine the names of the arguments it needs to inject?

Angular 16: ngCharts Error - Unable to Iterate Over registerables Property

Despite using callbacks when passing props in React JS components, the rerendering still occurs

Toggle visibility of table columns by selected options (using jQuery)

Improving code efficiency with jQuery through optimizing repetitive tasks

Navigating Overlays with Python and Selenium

Problems with Emulating Chrome | Using Media Queries

Populating dependent dropdown menus with database values while in edit mode

Creating beautiful user interfaces with Material UI and React

Enhance npm package by implementing custom functionality with React Component

Create dropdown options from JSON data

End your Idp session and log out using passport-saml

Check two arrays by comparing the first array and return the values that have a partial match, even if they are not

What is the best way to transfer a jQuery Raty score to Wtforms, Flask, or Python?

Enhance text content effortlessly with an automated text augmentation feature

Converting an HTMLElement to a Node in Typescript

Are you accessing the site on a variety of gadgets?

Information disappearing upon returning to a previous screen

Tips for implementing react portal functionality in react 15