CODEWITHSUNDEEP
javascriptdom-events
kuresh
kuresh

Reputation: 31

How to subtract a particular value from array using JavaScript

I am creating a program using JavaScript while a clicking of button it will select a seat and change its background color to green and at the same time the button value will be added to the text field and will toggle accordingly.

Issue: I am adding all the value to the text field using an array, which is successful but during toggling it cannot able to subtract the particular clicking button value from array.

Here I cannot able to use jQuery because this page is coming from a ajax-page load.

// JavaScript Document

var Cur_id;
var Cur_val;

function setId(id, value) {
    Cur_id = id;
    Cur_val = value;
    var SeatVal = document.getElementById(id);
    if (SeatVal.style.backgroundImage == "") {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/greenseat.png\')";
        var txbtElementSeat = new Array(document.getElementById("selectedseat").value += Cur_val + ",");
    } else if (SeatVal.style.backgroundImage == 'url("themes/frontend/images/greenseat.png")') {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/seat.png\')";
        var txbtElementSeatnbg = document.getElementById("selectedseat").value;
        removeSeat(txbtElementSeatnbg, Cur_val);

        function removeSeat(txbtElementSeatnbg, value) {
            for (var i = 0; i <= txbtElementSeatnbg.length; i++) {
                if (txbtElementSeatnbg[i] == value) {
                    txbtElementSeatnbg.splice(i, 1);
                    break;
                }
            }
        }
    } else if (SeatVal.style.backgroundImage == 'url("themes/frontend/images/seat.png")') {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/greenseat.png\')";
        var txbtElementseatnb = document.getElementById("selectedseat").value += Cur_val + ",";
    }
}

Upvotes: 1

Views: 731

Answers (2)

Vitim.us
Vitim.us

Reputation: 22168

To remove the seat from the list use this

//remove seat from list
function removeSeat(seatListElm, seatValue) {
    var arr=seatListElm.value.split(',');

     var p=arr.indexOf(seatValue);
     if(p!=-1){
         arr.splice(p, 1);
         seatListElm.value=arr.join(',');
     }
}

seatListElm would be the element that hold "b5,c7,d5,c2"
seatValue would be something like this "c7"

Working demo code: JSFIDDLE

JSFiddle exemple

Upvotes: 0

Niko
Niko

Reputation: 26730

Your main issue seems to be that you try to save an array into a textfield. That will actually work, but will convert the array to a string representation.

var a = document.getElementById('selectedseat').value; therefore loads the string representation of the array into a variable "a", not the array itself!

Why don't you use a variable in the outer context (not the local function scope of setId()!) to hold the array? Maybe somewhat like this:

// Create a variable for the array!
var selectedSeats = new Array();

// Build a function that will update the textfield.
// Call this, whenever the array gets changed!
function updateListOfSelectedSeats() {
    document.getElementById('selectedseat').value = selectedSeats.join(',');
}

// Removes a seat from the list of selected seats
function removeSeatFromList(seat) {
    for (var i = 0; i < selectedSeats.length; i++) {
        if (selectedSeats[i] == seat) {
            selectedSeats.splice(i, 1);
            updateListOfSelectedSeats();
            break;
        }
    }
}

// Now the function that reacts to clicks on a seat
function setId(id, value) {
    var Seat = document.getElementById(id);

    switch (Seat.style.backgroundImage) {
        case 'url("themes/frontend/images/greenseat.png")':
            // Seat is already selected and needs to be deselected
            Seat.style.backgroundImage = 'url("themes/frontend/images/seat.png")';
            removeSeatFromList(value);
            break;

        case '':
        case 'url("themes/frontend/images/seat.png")':
            // Seat is empty, select it!
            Seat.style.backgroundImage = 'url("themes/frontend/images/greenseat.png")';
            selectedSeats.push(value);
            updateListOfSelectedSeats();
            break;
    }
}

Upvotes: 2

Related Questions