CODEWITHSUNDEEP
javascriptjquery
Nippledisaster
Nippledisaster

Reputation: 298

Copy Object array values in textarea field

I have multiple object arrays in js and i want to insert them into Textarea elements accordingly

I have provided a code snipped below to see what im trying to do and the problem im haven is when you click the Paste button it only inserts the last values of the array. How do i make the button to copy paste all the array values into the textarea?

var darkmode = {
    '1': {
    '--primary_button': '#000','--primary_button_font': '#ffffff'
    },
    '2': {
    '--primary_button': '#ffffff','--primary_button_font': '#000'
    }
};
    $('.tButton').on('click', function (event) {
      var val = $(this).attr('data-value'); //returns 1,2
        for (var i in darkmode[val]) {
          if (val === '1') {
              $('#scheme1 textarea').text([i] + ": " + darkmode[val][i]);

          }else if (val === '2') {
             $('#scheme2 textarea').text([i] + ": " + darkmode[val][i]);
          };
            
      };
    });
<li id="scheme1">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="1">Paste</button>
</li>

<li id="scheme2">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="2">Paste</button>
</li>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The snipped

Upvotes: 0

Views: 189

Answers (2)

Parth Raval
Parth Raval

Reputation: 4453

var darkmode = {
  '1': {
    '--primary_button': '#000',
    '--primary_button_font': '#ffffff'
  },
  '2': {
    '--primary_button': '#ffffff',
    '--primary_button_font': '#000'
  },
  '3': {
    '--primary_button': '#fdfdfd',
    '--primary_button_font': '#fff'
  }
};
$('.tButton').on('click', function(event) {
  var getClickedElement = event.target.getAttribute('data-value')
  var val = $(this).attr('data-value');
  for (var i in darkmode[val]) {
    if (Number(val) == getClickedElement) {
      $('#scheme' + getClickedElement + ' textarea ').append([i] + ": " + darkmode[val][i]);
    }
  };
});
<li id="scheme1">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="1">Paste</button>
</li>

<li id="scheme2">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="2">Paste</button>
</li>
<li id="scheme3">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="3">Paste</button>
</li>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Note:- This will be the dynamic solution for multiple values...

Upvotes: 1

Mr Khan
Mr Khan

Reputation: 2292

Firstly, what is happening here is that every time you insert a value into the textarea, it is getting replaced with the latest value inserted and hence you get to see the last value only.

Instead of using text(), use append() which actually concats the inserted values to the element instead of replacing it.

var darkmode = {
    '1': {
    '--primary_button': '#000','--primary_button_font': '#ffffff'
    },
    '2': {
    '--primary_button': '#ffffff','--primary_button_font': '#000'
    }
};
    $('.tButton').on('click', function (event) {
      var val = $(this).attr('data-value'); //returns 1,2
        for (var i in darkmode[val]) {
          if (Number(val) === 1) {
              $('#scheme1 textarea').append([i] + ": " + darkmode[val][i]);

          }else if (Number(val) === 2) {
             $('#scheme2 textarea').append([i] + ": " + darkmode[val][i]);
          };
            
      };
    });
<li id="scheme1">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="1">Paste</button>
</li>

<li id="scheme2">
  <textarea name="theme"></textarea>
  <button class="tButton " data-value="2">Paste</button>
</li>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 2

Related Questions