armeer

Untitled

Sep 19th, 2020
1,057
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const data  = [
  2.     {
  3.         name: 'Гайк1',
  4.         lastname: 'Инанц1',
  5.         age: 27
  6.     },
  7.     {
  8.         name: 'Гайк2',
  9.         lastname: 'Инанц2',
  10.         age: 27
  11.     },
  12.     {
  13.         name: 'Гайк3',
  14.         lastname: 'Инанц3',
  15.         age: 27
  16.     },
  17.     {
  18.         name: 'Гайк4',
  19.         lastname: 'Инанц4',
  20.         age: 27
  21.     }
  22. ];
  23.  
  24.  
  25.  
  26.  
  27.  
  28. const root_elem = document.querySelector('#root');
  29.  
  30.  
  31. function changeCount(name, coef){
  32.     const cur_user = data.find(elem=>elem.name === name);
  33.     const key_arr = Object.keys(cur_user);
  34.    
  35.     if (key_arr.includes('count')){
  36.         cur_user['count'] += coef;
  37.     }else{
  38.         cur_user['count'] = coef;
  39.     }
  40.     console.log(data);
  41.     render();
  42. }
  43.  
  44.  
  45. function render(){
  46.     root_elem.innerText = '';
  47.  
  48.  
  49.     data.forEach((elem)=>{
  50.         const card = document.createElement('div');
  51.         card.classList.add('user');
  52.  
  53.         const name = document.createElement('p');
  54.         const lastname = document.createElement('p');
  55.         const age = document.createElement('p');
  56.         const btn_incr = document.createElement('button');
  57.         const btn_decr = document.createElement('button');
  58.         const clicker_info = document.createElement('p');
  59.  
  60.         clicker_info.classList.add('clicker_info');
  61.  
  62.  
  63.         card.appendChild(name);
  64.         card.appendChild(lastname);
  65.         card.appendChild(age); 
  66.         card.appendChild(btn_incr);
  67.         card.appendChild(btn_decr);
  68.         card.appendChild(clicker_info);
  69.  
  70.  
  71.         name.innerText = elem.name;
  72.         lastname.innerText = elem.lastname;
  73.         age.innerText = elem.age;
  74.         btn_incr.innerText = '+';
  75.         btn_decr.innerText = '-';
  76.  
  77.         if (elem.count === undefined){
  78.             clicker_info.innerText = 'кликов небыло';
  79.         }else{
  80.             clicker_info.innerText = elem.count;
  81.         }
  82.  
  83.        
  84.  
  85.  
  86.         btn_incr.addEventListener('click', ()=>changeCount(elem.name, 1));
  87.         btn_decr.addEventListener('click', ()=>changeCount(elem.name, -1));
  88.  
  89.         root_elem.appendChild(card);
  90.  
  91.     });
  92.  
  93.  
  94. }
  95.  
  96. render()
RAW Paste Data