11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Bouton en série

Bonjour,

Je débute en javascript, je vais tenter d'expliquer mon problème. Voilà, j'ai une série de 5 boutons avec un background bleu, j'aimerai que lorsque l'on clique sur un bouton (n'importe lequel) celui-ci change de background(devient blanc) et les autres restent au bleu. Par exemple, comme pour des boutons de pagination, un seul bouton est 'activé' au click. Je suis passé par plein de trucs, mais je pense ne pas avoir la bonne logique. Je suis arrivé à un résultat proche, mais c'est pas ça...
Voici mon code
<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="UTF-8">
	<title>test</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<input type="submit" name="page1" value="1" />
	<input type="submit" name="page2" value="2" />
	<input type="submit" name="page3" value="3" />
	<input type="submit" name="page4" value="4" />
	<input type="submit" name="page5" value="5" />
	
	<script src="script.js"></script>
</body></html>



input {
	border: solid 1px blue;
	background-color: blue;
	color: white;
	padding: 3px 6px;
	cursor: pointer;
}

input:hover {
	background-color: #fff;
	border: solid 1px blue;
	color: blue;
}



let inputs = document.querySelectorAll('input'),
	inputsLen = inputs.length;




for (let i = 0; i < inputsLen; i++) {
	let style = window.getComputedStyle(inputs[i], null).getPropertyValue('background-color');

	inputs[i].addEventListener('click', () => {

		if (style === 'rgb(0, 0, 255)') {
			inputs[i].style.backgroundColor = 'white';
			inputs[i].style.color = 'blue';
			inputs[i].nextElementSibling.style.backgroundColor = 'blue';
			inputs[i].nextElementSibling.style.color = 'white';
			inputs[i].previousElementSibling.style.backgroundColor = 'blue';
			inputs[i].previousElementSibling.style.color = 'white';
		} 
	});
}
Modérateur
Bonjour,

il te faut reprendre une boucle en testant la position de l'élément cliqué.

let inputs = document.querySelectorAll("input"),
  inputsLen = inputs.length;

for (let i = 0; i < inputsLen; i++) {
  let style = window
    .getComputedStyle(inputs[i], null)
    .getPropertyValue("background-color");

  inputs[i].addEventListener("click", () => {
    if (style === "rgb(0, 0, 255)") {
      for (let ii = 0; ii < inputsLen; ii++) {
        if (ii <= i) {
          inputs[ii].style.backgroundColor = "white";
          inputs[ii].style.color = "blue";
        } else {
          inputs[ii].style.backgroundColor = "blue";
          inputs[ii].style.color = "white";
        }
      }
    }
  });
}

je ne suis pas certains que ce soit le code le plus propre, je ne suis pas développeur.


Cdt
Voilà, j'ai repris ton idée gcyrillus , en remplaçant la condition dans la 2ème boucle
for (let ii = 0; ii < inputsLen; ii++) {
          if (ii === i){...}

Modifié par Shupps (30 May 2020 - 11:57)
Sujet clos
Aller à