How to subtract a particular value from array using JavaScript

Question

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 + ",";
    }
}

What is the purpose with using this in this line: removeSeat(this.txbtElementSeatnbg, this.Cur_val);? — Niko
– Niko, Commented Dec 8, 2012 at 11:18
because it will provide the current value of array and current value of button. — kuresh
– kuresh, Commented Dec 8, 2012 at 13:12
What @Niko meant was: What is the this value in your function? What will those properties contain? Please notice that this is not a reference to local variables in JavaScript. — Bergi
– Bergi, Commented Dec 8, 2012 at 13:34
it means when i will click a button , the role of this operator is it will take the current value and current id. — kuresh
– kuresh, Commented Dec 8, 2012 at 13:42
sorry,if this is not a reference to local variables then i had done it worngly. — kuresh
– kuresh, Commented Dec 8, 2012 at 13:45

Niko · Accepted Answer · 2012-12-08 14:48:20Z

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;
    }
}

Victor · Accepted Answer · 2012-12-08 16:36:48Z

0

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

edited Dec 8, 2012 at 16:36

answered Dec 8, 2012 at 15:07

Victor

22.4k15 gold badges101 silver badges115 bronze badges

Collectives™ on Stack Overflow

How to subtract a particular value from array using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related