Я хочу, чтобы SVG менял случайный цвет каждый раз, когда нажимается s. ⇐ CSS

[Anonymous]

Мне удалось полностью выровнять голову и цветовой контур, два SVG-файла. Но есть одна проблема: я хочу, чтобы цвет головы менялся на случайный цвет каждый раз, когда нажимается «s». Но почему-то цвет головы не меняется, хотя getRandomColor работает;

Код: Выделить всё

// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

// Function to change the color of the path element
function changePathFillColor() {
const pathElement = document.getElementById('path-to-change');
if (pathElement) {
const randomColor = getRandomColor();
pathElement.setAttribute('fill', randomColor);
}
}

// Listen for the 'S' key press
document.addEventListener('keydown', function(event) {
if (event.key === 's' || event.key === 'S') {
changePathFillColor();
}
});

Что касается HTML-кода, я решил получить содержимое svg-файла цвета головы и реорганизовать код следующим образом:
< pre class="lang-html Prettyprint-override">

Код: Выделить всё

Character Assembly

и вот мой CSS-код.

Код: Выделить всё

.character {
position: relative;
width: 200px; /* Adjust the size as needed */
height: 400px; /* Adjust the size as needed */
}

.part {
position: absolute;
}

.head {
animation: float 2s ease-in-out infinite;
position: relative;
}
.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}

.headoutline {
z-index: 2;
position: relative; margin
width: 100%;
height: 100%;
}

@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting position */
}
50% {
transform: translateY(-5px); /* Float up by 10 pixels */
}
}

Я предполагаю, что это не работает, потому что задействованы два файла SVG, и система не знает, цвет какого из них изменить. Поэтому я подумал, что мне следует добавить идентификатор к открытому SVG, но понятия не имею, как указать на него в коде JavaScript. Итак, что я могу сделать, чтобы это сработало?


Подробнее здесь: https://stackoverflow.com/questions/790 ... e-s-is-hit