Assigner plusieurs background-images à une class

Par motobecane31, il y a 9 ans

Javascript

Bonjour, je suis en train de créer un petit navigateur pour un site. Dans celui-ci je voudrais que chaque bloc ai un background-image propre. Sachant que chaque bloc à la même class, je pensais passer par Javascript mais mon code ne fonctionne pas.

Pourriez-vous m'aider ?

CSS

.selecta { width: 200px; height: 200px; display: flex; justify-content: space-around; font-family: 'Arial'; font-weight: bold; border: 1px solid black; margin-top: 5px; }

HTML

<div id="liste"> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> <a href="#" class="selecta"> <p class="titre">Carto Action</p> </a> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> <a href="#" class="selecta"> <p class="titre">Bain de Forêt</p> </a> </div>

JS

function backgroundList() { var elements = document.querySelectorAll("selecta"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.style.backgroundImage = 'url(BC' + i + '.jpg)'; } }

1 réponse

Lartak, il y a 9 ans

Bonsoir.

je pensais passer par Javascript mais mon code ne fonctionne pas.

À quel moment fais-tu appel à la fonction ?
Tu as peut-être défini la fonction, mais je ne vois pas à quel moment tu y fais appel.
Au passage, vérifies si tu as des erreurs dans la console de l'inspecteur de ton navigateur.