divのためのjavascript独自の色

Question

私の問題は、私が作成した付箋を持っていることですが、新しいものを作るたびに新しい色を変えることができますが、最初のノートで色を変えることができますそれらのすべての色。 私は彼ら自身のために独特の色のように持つことができるように、それぞれの色を選びたいと思います。 これは私のCodepenです： https://codepen.io/Qbinx/pen/OmObRg?editors=1010 私は新しいノートを作成すると、この問題が発生：

createNote = function(){ 
     var stickerEl = document.createElement('div'), 
      barEl = document.createElement('div'), 
      color = document.createElement('button'), 
      colorIcon = document.createElement('i'), 
      deleteBtn = document.createElement('button'), 
      deleteBtnIcon = document.createElement('i'), 
      moveIcon = document.createElement('i'), 
      colorEl = document.createElement('input'), 
      textareaEl = document.createElement('textarea'); 

     var transformCSSValue = "translateX(" + Math.random() * 800 + "px) translateY(" + Math.random() * 400 + "px)"; 

     stickerEl.style.transform = transformCSSValue; 

     barEl.classList.add('bar'); 
     stickerEl.classList.add('sticker'); 
     color.classList.add('color'); 
     deleteBtn.classList.add('deleteBtn'); 
     deleteBtnIcon.classList.add('ion-android-delete'); 
     colorIcon.classList.add('ion-android-color-palette'); 
     stickerEl.id = "rect" + totalNotes++; 

     colorEl.classList.add('jscolor'); 
     colorEl.onchange = function(){update(this.jscolor)}; 
     colorEl.value = "cc66ff"; 

     stickerEl.append(barEl); 
     stickerEl.append(color); 
     stickerEl.append(deleteBtn); 
     stickerEl.append(colorEl); 
     stickerEl.appendChild(textareaEl); 
     color.append(colorIcon); 
     deleteBtn.append(deleteBtnIcon); 
     barEl.append(moveIcon); 

     stickerEl.addEventListener('mousedown', onDragStart, false); 

     document.body.appendChild(stickerEl); 

    }; 

ので、私はノートの各色を変更するために何ができるのでしょうか？

Answer 1

[OK]を、私はそれを動作させるために何をしたのか説明します。

• 完全なソリューションがそのライブラリに依存しているため、jscolor.jsのコードを入れてください。

• この

  colorEl.classList.add('jscolor'); 
  colorEl.value = "cc66ff"; 
  var picker = new jscolor(colorEl); 
  colorEl.onchange = function(){ update(colorEl.value)}; 
  

  するために、この

  colorEl.classList.add('jscolor'); 
  colorEl.onchange = function(){update(this.jscolor)}; 
  colorEl.value = "cc66ff"; 
  

  から、createNote方法を変更行にjscolorのライブラリを初期化します。このピッカーを作成するために特別に作られました新しいメモを作成するとき。

• は、基本的には色を変更する項目を選択する方法を変更するこの

  var colorCall = document.querySelectorAll(".jscolor-active"); 
  var NotesCall = Array.prototype.filter.call(colorCall,     
  function(colorCall){ 
      return colorCall.parentNode.style.backgroundColor = "#" + jscolor; 
  }); 
  

  するために、この

  var colorCall = document.getElementsByClassName('sticker'); 
  var NotesCall = Array.prototype.filter.call(colorCall, 
  function(colorCall){ 
  return colorCall.style.backgroundColor = "#" + jscolor; 
  

  から更新方法を変更します。ここで

はそのcodepenです：https://codepen.io/jukanjavir/pen/wdyVGR

はそれがお役に立てば幸いです。