J'ai fait un clic de div. Après avoir cliqué sur la div ( p> quelque_id1 code>, quelques entrez le code ici code> _ID2), vous devez modifier la valeur sur chaque div ( largeur code>, Hauteur code>, Couleur d'arrière-plan code>).
La couleur de fond fonctionne normalement, mais la largeur et la hauteur ne fonctionnent pas. Je ne peux pas savoir où j'ai commis une erreur.
<select id="divwidth" onchange="ChengeWidth()">
<option value="100px">100px</option>
</select>
<input type="color" id="divbackgroundcolor" onchange="ColorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
3 Réponses :
Le menu ne dispose que d'une option, vous ne pouvez donc pas modifier la valeur et le p> OnCHange code> événement ne déclenche jamais. Si vous lui donnez plusieurs options, le code fonctionne.
<select id="divwidth" onchange="ChengeWidth()">
<option value="50px">50px</option>
<option value="100px">100px</option>
<option value="150px">150px</option>
<option value="200px">200px</option>
</select>
<input type="color" id="divbackgroundcolor" onchange="ColorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<select id="divwidth" onchange="ChengeWidth()">
<option value="100px">100px</option>
<option value="200px">200px</option>
<option value="300px">300px</option>
<option value="50px">50px</option>
</select>
<input type="color" id="divbackgroundcolor" onchange="ColorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
</body>
</html>L'erreur était que vous n'avez qu'une seule option dans la liste déroulante.
html fort> CSS fort> p> JavaScript P> Espérons que je vous ai pointé dans la bonne direction; bonne chance! p> p>let current;
function changeColor() {
const color = document.getElementById("divbackgroundcolor").value;
current.style.backgroundColor = color;
}
function changeWidth() {
const width = document.getElementById("divwidth").value;
current.style.width = width;
}
function initialize() {
const clickable = document.querySelectorAll('.clickable');
clickable.forEach((item) => {
item.onClick = () => {
current = this;
changeColor();
changeWidth();
}
});
}
initialize();
code> -éléments). Utilisez console.log code> pour vous assurer que tout fonctionne comme prévu. Li>
#divwidth code> dans mon exemple, mais j'espère que vous voyez l'approche que je vis. Li>
#divbackgroundColor code> afin que cela ne fonctionne pas encore li>
Avez-vous essayé d'utiliser l'outil de débogage de votre navigateur?
Peut-être
onclick plutôt queOnchange (vous devez réellement ajouter des gestionnaires d'événements dans JavaScript, plutôt que via des attributs en ligne HTML5 pour préserver la séparation du contenu)Étant donné que votre menu n'a qu'une option, vous ne pouvez jamais modifier la valeur, donc
Onchange ne fonctionne jamais.Vous enregistrez également une valeur cliquée, vous n'avez pas besoin d'utiliser si () chèques, il suffit d'exécuter Var W = Document.getElementyID ("divwidth"). Valeur; document.getElementyid (clickeddivid) .style.width = w;
Je veux donner un petit conseil car je vois beaucoup cela sur le débordement de la pile: rendre votre problème aussi petit que possible. Dans ce cas particulier: la méthode fonctionne-t-elle si vous l'appelez directement (Code HardCode A ClickedDivid). Si oui, passez à l'étape suivante: un changement d'option> fonctionne-t-il (donc .. Ajoutez plus d'options à tester) et ainsi de suite. Cela permet de développer beaucoup plus facile car vous pouvez vous concentrer sur une seule tâche.
Dans votre sélection, vous n'avez qu'une seule option, votre ONCHANGE ne fonctionne jamais car il n'y a pas d'autre option de choisir et de déclencher l'onduleur.