Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 02.04.2020, 19:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,608

Pavel_16,
<!DOCTYPE html>
<meta charset="utf-8">
<style id="compiled-css" type="text/css">
.coloring {
    display: flex;
    flex-wrap: wrap;
}
.coloring-toolbox {
    flex: 1 1 0;
}
.palette {
    display: flex;
    flex-wrap: wrap;
}
.palette-button {
    width: 16px;
    height: 16px;
    margin: 5px;
    border: 2px solid transparent;
    cursor: pointer;
}
.palette-button-active {
    border-color: #000;
}
.coloring-image {
    flex: 3 1 0;
    width: 500px;
    height: auto;
    border: 5px dashed #ddd;
}
.coloring-image > svg {
    max-width: 100%;
}
.selected {
    opacity: 0.8;
    cursor: pointer;
}
path {
    stroke: black;
    stroke-width: 1;
    stroke-linejoin: round;
}
</style><input type="button" id="rev_btn" src="" title="Шаг назад" onclick='rev()' value=
"Шаг назад"> <input type="button" id="check_btn" src="" title="Проверить!"
onclick='check()' value="Проверить"><div class="coloring"><div class="coloring-toolbox palette"></div><div class="coloring-image"><svg id="a780dc9c-2107-4fd6-8fec-765248a5097a" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" width="887.77227" viewbox="0 0 887.77227 772.83071"><title>happy_music</title><polygon points="887.772 763.25 252.263 772.831 0 728.121 393.817 728.121 887.772 763.25" fill=
"#ffffff"></polygon><circle cx="731.82227" cy="101.66024" r="101.66024" fill="#ffffff"></circle><path d="M335.9542,797.01953s1.487-31.15875,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="171.2269" cy="688.52637" r="15.25711" fill="#ffffff"></circle><rect x="168.74434" y="714.21843" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M838.40061,802.34205s1.487-31.15874,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="673.67331" cy="693.8489" r="15.25711" fill="#ffffff"></circle><rect x="671.19075" y="719.54095" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M911.85146,807.66458s1.487-31.15874,31.9712-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="747.12416" cy="699.17142" r="15.25711" fill="#ffffff"></circle><rect x="744.64161" y="724.86348" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M456.24328,782.11645s1.487-31.15874,31.97119-27.53695" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="291.51598" cy="673.6233" r="15.25711" fill="#ffffff"></circle><rect x="289.03342" y="699.31536" width="4.30672" height="30.14703" fill="#ffffff"></rect><path d="M229.50369,787.439s1.487-31.15874,31.97119-27.537" transform=
"translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="64.77639" cy="678.94583" r="15.25711" fill="#ffffff"></circle><rect x="62.29383" y="704.63788" width="4.30672" height="30.14703" fill="#ffffff"></rect><circle cx="442.27688" cy="503.48191" r="166.22823" fill="#ffffff"></circle><path d=
"M493.73979,580.41025a43.98767,43.98767,0,0,1,67.51907,0,48.89067,48.89067,0,1,0-67.51907,0Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d="M625.74457,580.41025a43.98759,43.98759,0,0,1,67.519,0,48.89064,48.89064,0,1,0-67.519,0Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><circle cx="354.70738" cy="464.81392" r="16.81788" fill="#ffffff"></circle><circle cx="486.70738" cy="464.81392" r="16.81788" fill="#ffffff"></circle><circle cx="322.49478" cy="545.03897" r="19.55626" fill="#ffffff"></circle><circle cx="547.39179" cy="545.03897" r="19.55626" fill="#ffffff"></circle><polygon points="434.943 505.926 420.276 569.484 444.721 545.039 434.943 505.926" fill=
"#ffffff"></polygon><polygon points=
"510.307 750.38 493.655 736.404 494.043 750.38 488.871 750.38 488.458 735.602 465.975 750.38 456.563 750.38 488.29 729.526 487.061 685.737 486.143 652.666 491.302 652.524 492.233 685.737 493.461 729.487 518.348 750.38 510.307 750.38"
fill="#ffffff"></polygon><polygon points=
"432.076 750.38 415.424 736.404 415.812 750.38 410.654 750.38 410.24 735.602 387.757 750.38 378.345 750.38 410.059 729.526 408.831 685.737 407.913 652.666 413.084 652.524 414.015 685.737 415.23 729.487 440.118 750.38 432.076 750.38"
fill="#ffffff"></polygon><path d=
"M600.83528,388.61566c-4.56112,0-8.58481,3.543-11.27493,8.985-2.37112-8.18315-7.3527-13.874-13.1704-13.874a8.84714,8.84714,0,0,0-1.17422.19724c-2.23625-8.737-7.43356-14.86444-13.493-14.86444-8.1005,0-14.6672,10.9446-14.6672,24.44533s6.5667,24.44533,14.6672,24.44533a8.84716,8.84716,0,0,0,1.17422-.19725c2.23625,8.737,7.43356,14.86444,13.493,14.86444,4.56112,0,8.58481-3.543,11.27493-8.985,2.37113,8.18316,7.3527,13.874,13.1704,13.874,8.1005,0,14.6672-10.9446,14.6672-24.44533S608.93578,388.61566,600.83528,388.61566Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M393.47351,507.83307h0a48.89061,48.89061,0,0,1,48.89061,48.89061v24.44543a48.89061,48.89061,0,0,1-48.89061,48.89061h0a0,0,0,0,1,0,0V507.83307A0,0,0,0,1,393.47351,507.83307Z"
transform="translate(679.72382 1074.30814) rotate(180)" fill="#ffffff"></path><path d=
"M598.30346,444.24843h0A48.89061,48.89061,0,0,1,647.19412,493.139v24.44543a48.89061,48.89061,0,0,1-48.89061,48.89061h0a0,0,0,0,1,0,0V444.24843A0,0,0,0,1,598.30346,444.24843Z"
fill="#ffffff"></path><path d=
"M780.03662,560.56514H772.2795c0-98.37742-80.03569-178.41374-178.41374-178.41374-98.37742,0-178.41374,80.03632-178.41374,178.41374H407.6949c0-102.655,83.51592-186.17086,186.17086-186.17086C696.52134,374.39428,780.03662,457.91019,780.03662,560.56514Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path>
<path d=
"M327.66117,411.058l.00139-.0029-3.64431-1.51771-15.37654-6.50027-5.51164-2.32988-.423,1.06789h0l-7.40381,18.694L316.14,429.28836l.1094.09906-1.40416,3.31082a5.86169,5.86169,0,0,0-.4899.95547c-.98358,2.48353.87418,4.95394,2.63035,5.6494s3.9773-.75381,4.96087-3.23734c.97022-2.44974.02206-5.5618-1.68937-6.31373l.00151-.0029-3.64431-1.51771-12.46676-4.84631,7.12325-17.98534-1.0558-.41806-7.12577,17.992-1.54154-.59929,7.15363-18.06223.18843.07978,14.6541,6.20232.10928.09906-1.404,3.31082a5.85137,5.85137,0,0,0-.48989.95547c-.98371,2.48353.87405,4.95394,2.63022,5.6494s3.9773-.75381,4.96087-3.23734C330.32064,414.922,329.37248,411.80993,327.66117,411.058Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M399.78108,456.95208c-7.564-4.32464-6.05044-13.815-6.05044-13.815-.19032-6.16526-5.284-5.29259-5.284-5.29259l-1.85385.4231a5.62911,5.62911,0,0,0-2.75664-.50981l-2.82.47452c6.42137,1.50877,5.89378,6.88051,5.89378,6.88051l.89964,6.281-16.82582-6.78775,1.93187-4.555a8.12868,8.12868,0,0,0,.68046-1.32715c1.3661-3.44946-1.21409-6.88051-3.65325-7.84645-2.43916-.96618-5.524,1.0471-6.89022,4.49643-1.34744,3.40232-.0305,7.7247,2.3464,8.769l-.002.00415,5.06157,2.10782.03769-.11936Zm-8.54443-11.036.53956,6.012a13.8665,13.8665,0,0,1-2.52575-9.20675,5.82316,5.82316,0,0,0-1.12688-3.22524A6.83065,6.83065,0,0,1,391.23665,445.91606Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M271.4328,368.0405l.002-.004-5.06157-2.10794-21.1545-8.22341,5.33923-4.75027a6.74419,6.74419,0,0,1,9.21683-1.5099l-1.65686-2.46248s-3.11483-4.12374-7.475.23935c0,0-5.39481,7.95307-13.86878,5.92579l28.94032,12.249.15187.13763-1.95014,4.59827a8.12429,8.12429,0,0,0-.68047,1.32715c-1.36609,3.44933,1.2141,6.88038,3.65326,7.84644s5.524-1.0471,6.89022-4.49643C275.12664,373.40733,273.8097,369.085,271.4328,368.0405Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M348.87976,341.126l-1.95027,4.59826a8.13218,8.13218,0,0,0-.68034,1.32715c-1.36622,3.44933,1.214,6.88039,3.65313,7.84645s5.52412-1.0471,6.89022-4.49643c1.34756-3.40232.03062-7.7247-2.34627-8.76915l.002-.004-5.06157-2.10794-17.31509-6.73091,9.89338-24.97992-1.46629-.58077-9.89716,24.98925-2.141-.83221,9.9356-25.0868.26178.11078,20.353,8.61438.152.13763L357.2127,319.76a8.13743,8.13743,0,0,0-.68034,1.32715c-1.36622,3.44946,1.214,6.88051,3.65313,7.84657s5.52412-1.0471,6.89022-4.49656c1.34756-3.40231.03062-7.72469-2.34628-8.769l.002-.00416-5.06157-2.10781L338.98511,304.812h0l-.00088-.00038-.67088-.28358-7.65513-3.23608-10.87066,27.44744,28.9402,12.249Zm-18.809-38.35074Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M257.16744,200.55646l.00353-.00706-8.71319-3.62856-36.41622-14.15627,9.19111-8.17728s6.11371-8.4828,15.86619-2.5991l-2.852-4.23907s-5.36217-7.09893-12.86781.41189c0,0-9.2869,13.69082-23.87434,10.201l49.81893,21.08581.26152.237-3.35707,7.91563a14.00544,14.00544,0,0,0-1.17137,2.28464c-2.35169,5.9379,2.08991,11.84429,6.28877,13.50732s9.50936-1.80256,11.86117-7.74045C263.52617,209.795,261.25917,202.35435,257.16744,200.55646Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path><path d=
"M283.90741,319.4701c-18.08491-10.33993-14.46594-33.03029-14.46594-33.03029-.455-14.7407-12.63376-12.65406-12.63376-12.65406l-4.43241,1.01143a13.4583,13.4583,0,0,0-6.59088-1.219l-6.7425,1.13469c15.353,3.60738,14.09161,16.45074,14.09161,16.45074l2.15092,15.0171-40.229-16.2288,4.61893-10.89082a19.45075,19.45075,0,0,0,1.627-3.17306c3.26633-8.24724-2.90271-16.45062-8.73461-18.76034s-13.20748,2.50356-16.47381,10.75068c-3.22184,8.13468-.07322,18.46919,5.60983,20.96607l-.00479.00983,12.10177,5.03977.09011-.28534Zm-20.429-26.3861,1.29451,14.42385c-7.59564-10.08294-6.04314-22.06233-6.04314-22.06233a13.925,13.925,0,0,0-2.69425-7.71121C264.76078,282.95569,263.47837,293.084,263.47837,293.084Z"
transform="translate(-156.11386 -63.58465)" fill="#ffffff"></path></svg></div></div>
<script>
// сюда код из поста выше
</script>
Ответить с цитированием
  #12 (permalink)  
Старый 02.04.2020, 19:58
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 370

Сообщение от Pavel_16 Посмотреть сообщение
Т.Е. вместо строк 58-67 вставляем этот код??
вообще походу сломал_____это пи..........
попробовал, не работает
В самом начале вы задали path, как
<path d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z" fill="#ffffff" />
Т.е цвет задавали через атрибут, а не через style.
Поэтому я так и проверял цвета по их атрибутам.

Новые цвета тоже задавайте через атрибут

function handleClick () {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    
    this.setAttribute('fill', currentColor.dataset.color);
    check();

  }


Так работает.
Ответить с цитированием
  #13 (permalink)  
Старый 02.04.2020, 20:04
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

Пошла машина...................
РОНИ - ты лучший - побольше таких - спасибо огромное!
Ответить с цитированием
  #14 (permalink)  
Старый 02.04.2020, 20:25
Аспирант
Отправить личное сообщение для Pavel_16 Посмотреть профиль Найти все сообщения от Pavel_16
 
Регистрация: 01.04.2020
Сообщений: 46

DEL

Последний раз редактировалось Pavel_16, 02.04.2020 в 21:25. Причина: -
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как увеличить id элемента при динамическом создании в JS? angel026 Javascript под браузер 6 28.03.2018 23:34
Как закрыть блок toogle при пропадании фокуса или при помощи esc? giwuf Библиотеки/Тулкиты/Фреймворки 0 18.01.2018 15:09
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как сделать выполнение одного JS после выполнения другого vita1ii Events/DOM/Window 2 11.01.2013 16:52
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 15:00