CODEWITHSUNDEEP
javascriptjquery
Rein Mallari
Rein Mallari

Reputation: 27

How to concatenate values in one variable

How can I concatenate the values of my div when they are click in one variable?

here is my code sample.

var concatenated_values; //1,2,3

$("#first_container").click(function() {
  console.log($("#first_container input:hidden").val());

});

$("#second_container").click(function() {
  console.log($("#second_container input:hidden").val());

});

$("#third_container").click(function() {
  console.log($("#third_container input:hidden").val());

});
#first_container, #second_container , #third_container{
  width:300px;
  height:200px;
  background:red;
  cursor:pointer;
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

  <div id="first_container">

      <p>Test 1</p>
      <input type="hidden" value='1'/>

  </div>

  <div id="second_container">

      <p>Test 2</p>
      <input type="hidden" value='2'/>

  </div>


  <div id="third_container">

      <p>Test 3</p>
      <input type="hidden" value='3'/>

  </div>

</div>

</body>
</html>

so when I click all of my div I am trying to have a value in my concatenated_values like this

1,2,3

and I still can click the other div it is like unselecting, so when I click the selected div, it should update my variable and remove its value on it.

1,3

Any help would be really appreciated.

Upvotes: 0

Views: 175

Answers (5)

Keith
Keith

Reputation: 24181

Using classes will simplify things, below I use a class called selected, you can then use the toggleClass method to flip on an off.

You can then just find all Div's with the selected class, and add up the values.

eg.

$('.container > div').click(function () {
  var $t = $(this);
  $t.toggleClass('selected');
  var concatenated = [];
  $t.closest('.container')
    .find('.selected').each(function () {
      concatenated.push($(this).find('input').val());
    });
  $('#result').text(concatenated.join(','));
});
.container > div {
  width:300px;
  height:30px;
  background:red;
  cursor:pointer;
}

.container > .selected {
  background: pink;
}

#result {
  width:300px;
  height:30px;
  background: yellow;  
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

  <div id="first_container">

      <p>Test 1</p>
      <input type="hidden" value='1'/>

  </div>

  <div id="second_container">

      <p>Test 2</p>
      <input type="hidden" value='2'/>

  </div>


  <div id="third_container">

      <p>Test 3</p>
      <input type="hidden" value='3'/>

  </div>

</div>

<p>Result</p>
<div id="result"></div>

</body>
</html>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337550

I would suggest you change your logic to not use a global variable at all. If you amend the HTML so that you place a common class on each clickable div, then you can use a class to keep track of which is 'active', in order to make an array of the child input values. You can then join() this to make the string you require.

This approach is more maintainable, extensible and simpler. Here's an example:

$('.sub-container').on('click', e => {
  let $this = $(e.target).toggleClass('active');
  let concatenated_values = $('.active').map((i, el) => $(el).find('input').val()).get().join(',');
  console.log(concatenated_values);
});
.sub-container {
  width: 300px;
  height: 200px;
  background: red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div id="first_container" class="sub-container">
    <p>Test 1</p>
    <input type="hidden" value="1" />
  </div>
  <div id="second_container" class="sub-container">
    <p>Test 2</p>
    <input type="hidden" value="2" />
  </div>
  <div id="third_container" class="sub-container">
    <p>Test 3</p>
    <input type="hidden" value="3" />
  </div>
</div>

Upvotes: 1

mkHun
mkHun

Reputation: 5927

You really don't need to add the separate click event for each of the div.

Then give some border or change the background color to know the difference clicked or not. So I have added some class if it is clicked.

So the final code is

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
        var concatenated_values = [];
        $().ready(function () {
            $("#first_container, #second_container, #third_container").click(function () {
                var val = $(this).find('input:hidden').val();
                var indx = concatenated_values.indexOf(val);
                if (indx > -1) {
                    concatenated_values.splice(indx, 1);
                    $(this).removeClass('selected');
                } else {
                    concatenated_values.push(val);
                    $(this).addClass('selected');
                }
                console.log(concatenated_values);
            });

        });
    </script>
    <style>
        #first_container,
        #second_container,
        #third_container {
            width: 300px;
            height: 200px;
            background: red;
            cursor: pointer;
            margin:10px;
            padding: 10px;
        }
        .selected {
            border: 2px solid rgb(48, 47, 46);
        }
    </style>
</head>

Upvotes: 1

Supportic
Supportic

Reputation: 159

Make your variable as a array and save the values of the divs in that array. Afterwards you can loop through that array and print all values if needed or make use of other array functions like reduce to calculate i.e. the sum.

var concatenated_values = []; //1,2,3

$("#first_container").click(function() {
  const input = $("#first_container input:hidden").val();
  if (concatenated_values.includes(input))
    concatenated_values.splice(concatenated_values.indexOf(input), 1);
  else
    concatenated_values.push($("#first_container input:hidden").val());
  console.log(concatenated_values);
});

$("#second_container").click(function() {
  const input = $("#second_container input:hidden").val();
  if (concatenated_values.includes(input))
    concatenated_values.splice(concatenated_values.indexOf(input), 1);
  else
    concatenated_values.push($("#second_container input:hidden").val());
  console.log(concatenated_values);
});

$("#third_container").click(function() {
  const input = $("#third_container input:hidden").val();
  if (concatenated_values.includes(input))
    concatenated_values.splice(concatenated_values.indexOf(input), 1);
  else
    concatenated_values.push($("#third_container input:hidden").val());
  console.log(concatenated_values);
});
#first_container,
#second_container,
#third_container {
  width: 300px;
  height: 200px;
  background: red;
  cursor: pointer;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">

    <div id="first_container">

      <p>Test 1</p>
      <input type="hidden" value='1' />

    </div>

    <div id="second_container">

      <p>Test 2</p>
      <input type="hidden" value='2' />

    </div>


    <div id="third_container">

      <p>Test 3</p>
      <input type="hidden" value='3' />

    </div>

  </div>

</body>

</html>

Upvotes: 1

Greedo
Greedo

Reputation: 3549

You can store the values in an array and then push or filter the value if is present/not present in the array.

var concatenated_values = []; //1,2,3

$("#first_container").click(function() {
  checkValues($("#first_container input:hidden").val());
  console.log(concatenated_values.join(','));
});

$("#second_container").click(function() {
  checkValues($("#second_container input:hidden").val());
  console.log(concatenated_values.join(','));
});

$("#third_container").click(function() {
  checkValues($("#third_container input:hidden").val());
  console.log(concatenated_values.join(','));
});

function checkValues(x) {
  var i = concatenated_values.indexOf(x);
  if(i !== -1) {
    concatenated_values = concatenated_values.filter(function(v){
      return v !== x;
    });
  } else {
    concatenated_values.push(x);
  }
}
#first_container, #second_container , #third_container{
  width:300px;
  height:200px;
  background:red;
  cursor:pointer;
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

  <div id="first_container">

      <p>Test 1</p>
      <input type="hidden" value='1'/>

  </div>

  <div id="second_container">

      <p>Test 2</p>
      <input type="hidden" value='2'/>

  </div>


  <div id="third_container">

      <p>Test 3</p>
      <input type="hidden" value='3'/>

  </div>

</div>

</body>
</html>

Upvotes: 1

Related Questions