Как я могу позволить пользователю щелкнуть цвет, чтобы стать функцией, которая изменяет заливку объекта SVG при нажатии

Question

Я пытаюсь создать цветную палитру, по которой пользователи могут щелкнуть по ней, затем она становится цветом для заполнения объекта SVG. вроде как простые раскраски для детей. Я не могу понять, как сказать javascript, чтобы сохранить цвет, и я не могу использовать php.

Я пытался создать цвет ввода типа. Проблема заключается в переходе между выбором цвета и нажатием на цвет

Я думаю, что мой код даже не в том направлении, в котором я должен идти ..

<input type="color" id="myColor">
<input type="color" id="myColor">
<button class="btn" id="btn-reset">reset</button>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

<path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
    C407.227,134.613,291.451,51.919,291.451,51.919z"/>

<path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
    c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>

<path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
    c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
</svg>

</div>

  var x = document.getElementById("myColor").value;
  document.getElementById("demo").innerHTML = x;
}

Я ожидаю, что цвета вверху сохранят свой цветовой код, чтобы заполнить пути в svg onclick. Но я не могу заставить его работать. Как раскраска для детей.

Answer 1

ID должен быть уникальным!

const
      ChoseColor   = document.querySelector('#btn-Color-hidden'),
      ResetButton  = document.querySelector('#btn-reset'),
      All_svgPath  = document.querySelectorAll('#Layer_1 path'),
      defaultColor = '#FFFFFF',
      LayerSVG     = document.querySelector('#Layer_1');

    var PathColor = null;

    LayerSVG.onclick=e=>{
      if (!e.target.matches('path')) return;
      e.stopPropagation();
      PathColor = e.target;
      ChoseColor.value = PathColor.getAttribute('fill');
      ChoseColor.click();
    }

    ChoseColor.onchange=_=> {
      PathColor.setAttribute('fill', ChoseColor.value)
    }

    ResetButton.onclick=_=>{
      All_svgPath.forEach(p=>{ p.setAttribute('fill', defaultColor) })
    }

<input type="color" id="btn-Color-hidden" style="display: none">

  <button class="btn" id="btn-reset">reset</button>
  
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
  
  <path id="path1" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M291.451,51.919v202.54c0,0,164.521,119.846,140.146,0
      C407.227,134.613,291.451,51.919,291.451,51.919z"/>
  
  <path id="path2" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M169.595,150.844c0,0-76.24,69.615-40.606,128.309
      c35.634,58.695,155.798-51.867,151.654-85.993C276.498,159.034,177.054,89.42,169.595,150.844z"/>
  
  <path id="path3" fill="#FFFFFF" stroke="#231F20" stroke-miterlimit="10" d="M40.332,90.466c0,0-39.911,76.119-2.691,87.83
      c37.22,11.71,78.923-46.844,56.054-78.462C70.826,68.216,40.332,90.466,40.332,90.466z"/>
  </svg>