Problème de changement de couleur lors de l'ouverture d'un formulaire

[NinaP48]

Bonjour, j'ai codé l'ouverture d'un formulaire pour modifier une région ou un marqueur lorsque je clique dessus.

// Bouton AddMarker appelant la fonction addMarker() permettant d'ajouter un marker à l'emplacement du curseur
let buttonAddMarker = document.querySelector('[data-action="add-marker"]');

buttonAddMarker.addEventListener('click', function() {
// récupération du temps du marqueur
let currentTime = wavesurfer.getCurrentTime();
// instanciation des options du marqueur
let marker = {
time: currentTime,
color: 'red',
label: 'Marqueur',
position: 'top'
};
// Ajout du marqueur à la forme d'onde
wavesurfer.addMarker(marker);
});

// Bouton AddRegion appelant la fonction addRegion() permettant d'ajouter une région de longueur 5 commençant à l'emplacement du curseur
let buttonAddRegion = document.querySelector('[data-action="add-region"]');

buttonAddRegion.addEventListener('click', function() {
// récupération du temps du curseur
let currentTime = wavesurfer.getCurrentTime();
// Initialisation de la région
let region = {
start: currentTime,
end: currentTime + 5,
color: 'rgba(255, 0, 0, 0.2)'
};
// Ajout de la région à la forme d'onde
wavesurfer.addRegion(region);
});

// Gestion d'évènement de sélection d'un marqueur appelant la fonction updateMarkerInfo()
wavesurfer.on('marker-click', (m) => {
const indexMarker = wavesurfer.markers.markers.findIndex(_m => _m.time === m.time); // !!!! regarder ce que signifie cette ligne précisément
updateMarkerInfo(m, indexMarker); // appel de la fonction updateMarkerInfo()
});

let markerFormOpen=false;

// Fonction updateMarkerInfo -> Ouverture d'un formulaire permettant de modifier le marqueur sélectionné ou de le supprimer.
function updateMarkerInfo(marker, indexMarker) {
// Vérifie si un formulaire est déjà ouvert
if (markerFormOpen){
return;
}
markerFormOpen = true;

// Créer un formulaire
let form = document.createElement('form');
form.classList.add('p-3', 'bg-light');

// Ajoute un champ pour le nom du marqueur sélectionné
let nameLabel = document.createElement('label');
nameLabel.classList.add('form-label');
nameLabel.textContent = 'Nom : ';
let nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.classList.add('form-control');
nameInput.value = marker.label;
nameLabel.appendChild(nameInput);
form.appendChild(nameLabel);

// Ajoute un champ pour la couleur du marqueur sélectionné
let colorLabel = document.createElement('label');
colorLabel.classList.add('form-label');
colorLabel.textContent = 'Couleur : ';
let colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.classList.add('form-control');
colorInput.value = marker.color;
colorLabel.appendChild(colorInput);
form.appendChild(colorLabel);

// Ajoute un champ pour la position du marqueur sélectionné "top" ou "bottom"
let positionLabel = document.createElement('label');
positionLabel.classList.add('form-label');
positionLabel.textContent = 'Position : ';
let positionInput = document.createElement('select');
positionInput.classList.add('form-select');
let positions = ['top', 'bottom'];
positions.forEach(function(position) {
let option = document.createElement('option');
option.value = position;
option.text = position;
positionInput.add(option);
});
positionInput.value = marker.position;
positionLabel.appendChild(positionInput);
form.appendChild(positionLabel);

// Ajoute un champ pour le temps du marqueur sélectionné
let timeLabel = document.createElement('label');
timeLabel.textContent = 'Temps (en seconde): ';
let timeInput = document.createElement('input');
timeInput.type = 'number';
timeInput.step = 'any';
timeInput.value = marker.time;
timeInput.className = "form-control mb-2";
timeLabel.appendChild(timeInput);
form.appendChild(timeLabel);

// Ajoute un bouton de validation pour la modification des informations du marqueur sélectionné
let submitButton = document.createElement('button');
submitButton.classList.add('btn', 'btn-primary', 'me-2');
submitButton.textContent = 'Valider';
form.appendChild(submitButton);

// Ajoute un bouton de suppression du marqueur sélectionné
let deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger');
deleteButton.textContent = 'Supprimer';
form.appendChild(deleteButton);

// Gestionnaire d'événement pour la soumission du formulaire
form.addEventListener('submit', function(event) {
event.preventDefault();
const markerCopy = {...marker}
wavesurfer.markers.remove(indexMarker);
wavesurfer.addMarker({...markerCopy /* old properties*/, label: nameInput.value, color: colorInput.value, position: positionInput.value, time: timeInput.value /* new properties */})
// Masquer le formulaire
form.style.display = 'none';
markerFormOpen=false;
});

// Gestion d'évènement de sélection d'un marqueur appelant la fonction updateRegionInfo()
wavesurfer.on('region-click', (r) => {
let indexRegion = -1;
if (Array.isArray(wavesurfer.regions.list)) {
indexRegion = wavesurfer.regions.list.findIndex(region => region === r);
}
updateRegionInfo(r);
});

// Variable indiquand si un formulaire de modification de région est déjà ouvert ou non
let regionFormOpen = false;

// Fonction updateRegionInfo () -> Ouverture d'un formulaire permettant de modifier la région sélectionnée ou de la supprimer.

function updateRegionInfo(region) {
// Vérifie si un formulaire est déjà ouvert
if (regionFormOpen){
return;
}
regionFormOpen = true;

// Récupérer les informations de la région sélectionnée
const { start, end, color, data } = region;

// Créer un formulaire
const form = document.createElement('form');
form.classList.add('p-3', 'bg-light');

// Ajouter un champ pour la couleur de la région
const colorLabel = document.createElement('label');
colorLabel.classList.add('form-label');
colorLabel.textContent = 'Couleur : ';
const colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.classList.add('form-control');
colorInput.value = color;
colorLabel.appendChild(colorInput);
form.appendChild(colorLabel);

// Ajouter un champ pour le début de la région
const startLabel = document.createElement('label');
startLabel.textContent = 'Début (en secondes) : ';
const startInput = document.createElement('input');
startInput.type = 'number';
startInput.step = 'any';
startInput.value = start;
startInput.className = "form-control mb-2";
startLabel.appendChild(startInput);
form.appendChild(startLabel);

// Ajoute un champ pour la fin de la région
const endLabel = document.createElement('label');
endLabel.textContent = 'Fin (en secondes) : ';
const endInput = document.createElement('input');
endInput.type = 'number';
endInput.step = 'any';
endInput.value = end;
endInput.className = "form-control mb-2";
endLabel.appendChild(endInput);
form.appendChild(endLabel);

// Ajouter un champ pour la note de la région
const noteLabel = document.createElement('label');
noteLabel.textContent = 'Note : ';
const noteInput = document.createElement('input');
noteInput.type = 'text';
noteInput.value = region.data.note || '';
noteInput.className = "form-control mb-2";
noteLabel.appendChild(noteInput);
form.appendChild(noteLabel);

// Ajoute un bouton pour valider les modifications
const submitButton = document.createElement('button');
submitButton.classList.add('btn', 'btn-primary', 'me-2');
submitButton.textContent = 'Valider';
form.appendChild(submitButton);

// Ajoute un bouton pour supprimer la région
const deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger');
deleteButton.textContent = 'Supprimer';
form.appendChild(deleteButton);

// Gérer la soumission du formulaire
form.addEventListener('submit', (event) => {
event.preventDefault();
region.update({
start: startInput.value,
end: endInput.value,
color: colorInput.value,
data: {
...data,
note: noteInput.value
}
});
// Masquer le formulaire
region.element.style.opacity = 0.3;
form.style.display = 'none';
// Suite à la fermeture du formulaire, il sera à nouveau possible d'en ouvrir un
regionFormOpen=false;
});

// Gérer la suppression de la région
deleteButton.addEventListener('click', (event) => {
event.preventDefault();
region.remove();
// Masquer le formulaire
form.style.display = 'none';
// Suite à la fermeture du formulaire, il sera à nouveau possible d'en ouvrir un
regionFormOpen=false;
});

// Afficher le formulaire
document.body.appendChild(form);
};

Le problème est le suivant : la couleur d'origine de mes marqueurs et régions est le rouge. Cependant, lorsque mon formulaire, dans l'input de la couleur je peux voir que c'est le noir qui est sélectionné et quand je ferme par la suite sans faire aucune modification la couleur de mes marqueurs et régions devient le noir. Ainsi, j'aimerais faire en sorte que lors de l'ouverture du formulaire, la couleur de l'input soit bien celle de mes marqueurs et régions pour que ça ne se modifie pas sans que je le veuille.
J'ai essayé de fournir tout le code utile.

[katspaugh]

Look, it was kinda funny the first time, but you're posting for the 4th time already, so I'm gonna be direct:

• You're asking basic JavaScript questions in a forum for a specific JS library
• You're doing it in French like nothing special, although this entire site and forum are in English. I understand not everyone speaks English, but in 2023 I think it's very easy to copy and paste your text in Google Translate or similar. Why do you expect others to do it?
• The code isn't formatted properly, it's hard to read.

Although I appreciate your enthusiasm in learning JavaScript and using wavesurfer for that, I kindly ask that you use platforms more geared towards Q&A and learning, like StackOverflow, Egghead.io, CodeCademy etc.

Sorry for the rant. Cheers.

[NinaP48]

I'm sorry if my repetitive questions disturbed, it was not my goal.
I didn't think of translating my text because I have automatic translation on my computer, so that didn't occur to me. As for the format of my code, I tried several times to import it correctly and without success.
I would use other platforms in the future.

[katspaugh]

Gotcha, no problem. Thanks for undersrtanding!