CODEWITHSUNDEEP
javascriptjquery
AXAI
AXAI

Reputation: 706

Change and Add value into array then show it

$('.inp').click(function(){
  var arr = [];
  var id = $(this).attr('id');
  var value = $(this).val();
  
  if(value == 'empty') {
    $(this).val(id+'ON');
    arr.push(value);
  }
  if(value == id+'ON') {
    arr.splice(arr.indexOf(value), 1);
    $(this).val(id+'OFF');
    arr.push(value);
  }
  if(value == id+'OFF') {
    $(this).val('empty');
    arr.splice(arr.indexOf(value), 1);
  }
  $('.txt').val(arr.join(','));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='empty'>
  <input class='inp' id='y' type='button' value='empty'>
  <input class='inp' id='z' type='button' value='empty'>
</form>

In my script here, I'm trying to make the .txt to obtain the values ON, OFF only, But in the part

if(value == 'empty') {
    $(this).val(id+'ON');
    arr.push(value);
  }

the .txt pushes empty instead of the new value id+ON

Also when i click on another button, the entire .txt is removed and adds the clicked button value only,

For example if i clicked #x the .txt should be xON, And if i clicked #y while .txt has the value xON

i want it to be xON,yON but it becomes yON only.

Upvotes: 2

Views: 97

Answers (5)

xGeo
xGeo

Reputation: 2139

You may want something like this:

$(function() {
  var values = {};

  $('.inp').click(function() {
    var id = $(this).attr('id'),
      value = $(this).val(),
      newVal = id,
      finalVal = '';
    if (value == 'empty') {
      newVal += 'ON';
      values[id] = '';
    } else {
      if (value == (id + 'ON'))
        newVal += 'OFF';
      else
        newVal = 'empty';
      values[id] = value;
    }
    $(this).val(newVal);
    for (key in values) {
      if (values.hasOwnProperty(key) && !!values[key]) {
        finalVal += values[key];
      }
    }
    $('.txt').val(finalVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='xON'>
  <input class='inp' id='y' type='button' value='yON'>
  <input class='inp' id='z' type='button' value='zON'>
</form>

Upvotes: 1

kharhys
kharhys

Reputation: 257

The reason why you get empty instead of id+'ON' is because the variable value contains the string 'empty', a primitive hence assigned by value. In javascript assignment by value, as opposed to assignment by reference, implies the value in the variable can not change unless reassigned. To get the new value you should call value = $(this).val(); before arr.push(value); so that you push the updated value.

Because you have declared arr inside the click handler, every time a button is clicked, the array is reinitialized. To get the desired result, move the declaration var arr = []; outside the callback function.

Also, you should not call arr.splice(arr.indexOf(value), 1); inside the block if(value == id+'ON') because that will remove it from arr. and your history will be inconsistent. If you do not want the values empty appearing in .txt input. remove arr.push(value); from the block if(value == 'empty')

See this pen with the described edits.

Upvotes: 1

Chetan acharekar
Chetan acharekar

Reputation: 91

For every button click, var arr = [];, This statement is creating an empty array for you. This should be populated from existing text field.

Upvotes: 3

ADyson
ADyson

Reputation: 61914

It's not completely clear from the question wording what the full requirements are, but I think this may be what you're looking for.

$(function() {
  var list = {};

  $('.inp').click(function() {
    var id = $(this).attr('id');
    var value = $(this).val();
    var newVal = id;

    if (value == 'empty') {
      newVal += 'ON';
      $(this).val(newVal);
      list[id] = newVal;
    }
    if (value == id + 'ON') {
      newVal += 'OFF';
      $(this).val(id + 'OFF');
      list[id] = newVal;
    } else if (value == id + 'OFF') {
      $(this).val('empty');
      list[id] = null;
    }
    console.log(JSON.stringify(list));
    var output = "";
    for (key in list) {
      if (list[key] != null) {
        if (output != "") output += ",";
        output += list[key];
      }
    }
    $('.txt').val(output);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  <input class='inp' id='x' type='button' value='empty'>
  <input class='inp' id='y' type='button' value='empty'>
  <input class='inp' id='z' type='button' value='empty'>
</form>

If this isn't quite what you meant, then please clarify what exactly is needed.

Upvotes: 2

Mehdi Bouzidi
Mehdi Bouzidi

Reputation: 1985

Cause you're using this:

var value = $(this).val();//the value of the pressed button is always "empty"

Instead of this:

var value = id+'ON';

or:

arr.push(id+'ON');

You're saying that your var value contains "empty" so the array will push the value empty.

Upvotes: 2

Related Questions