Increment/Decrement valeur div via évènements sur images

**bajoe** · 06/06/2016, 13h09

Bonjour à tous,

J'essaye de faire marcher une fonction onclick sur des images (+/-) permettant de modifier la valeur d'une div mais cela ne fonctionne pas et je ne comprends pas pourquoi...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/challenge.css" rel="stylesheet" />
</head>
<body>
 
	<script type="text/javascript">
 
		var i = 0;
 
    function incNumber(i) {
        if (i < 10) {
            i++;
        } else if (i = 10) {
            i = 0;
        }
        document.getElementById("scoExt").innerHTML = i;
    }
 
    function decNumber() {
        if (i > 0) {
            --i;
        } else if (i = 0) {
            i = 10;
        }
        document.getElementById("scoExt").innerHTML = i;
    }
  </script>
 
<div id="scoDom" class="score sc1">0</div>
 
<div id="scoExt" class="score sc2">
<label id="displayExt">0</label>
<div id=plusExt" class="addscoreExt">
	<a href="" onclick="incNumber()">
		<img src="images/challenge_score_addgoals.png">
	</a>
</div>
 
<div id=plusExt" class="removescoreExt">
	<a href="" onclick="decNumber()">
		<img src="images/change_score_removegoals.png">
	</a>
</div>
</div>
 
 
</body>
</html>

Code également accessible ici : https://jsfiddle.net/Lwmuqe0h/

**SpaceFrog** · 06/06/2016, 13h40

Avec quelques petit correctifs :
https://jsfiddle.net/Lwmuqe0h/2/

**chadoum** · 06/06/2016, 13h40

Bonjour,
Plusieurs petites erreurs :
Tu ne dois pas passer i en paramètre de ta fonction incNumber.Des guillemets non ouverts dans tes id de div. Et tes href vides vont recharger la page complètement donc tu ne verras pas l'incrément s'afficher.

Mon code d'exemple corrigé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
 
</head>
 
<body>    
 
    <script type="text/javascript">
        var i = 0;
 
        function incNumber() {
            if (i < 10) {
                i++;
            } else if (i = 10) {
                i = 0;
            }
            document.getElementById("displayExt").innerHTML = i;
        }
 
        function decNumber() {
            if (i > 0) {
                --i;
            } else if (i = 0) {
                i = 10;
            }
            document.getElementById("displayExt").innerHTML = i;
        }
    </script>
 
    <div id="scoDom" class="score sc1">0</div>
 
    <div id="scoExt" class="score sc2">
        <label id="displayExt">0</label>
        <div id="plusExt" class="addscoreExt">
	       <a href="#" onclick="incNumber()">
		      +
	       </a>
         </div>
 
         <div id="plusExt" class="removescoreExt">
            <a href="#" onclick="decNumber()">
                -
            </a>
        </div>
    </div>
</body>
 
</html>

**bajoe** · 06/06/2016, 14h06

Merci pour votre aide !!

@chadoum, je vois que tu me dis de ne pas utiliser de balise <a> pour éviter de recharger la page mais dans ton exemple, je les retrouve..

J'ai essayé du coup de faire un mix avec ce qu'a proposé @SpaceFrog mais ça bloque toujours (grrr) !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
	<script type="text/javascript">
 
		var i = 0;
 
    function incNumber() {
        if (i < 10) {
            i++;
        } else if (i = 10) {
            i = 0;
        }
        document.getElementById("scoExt").textContent = i;
    }
 
    function decNumber() {
        if (i > 0) {
            --i;
        } else if (i = 0) {
            i = 10;
        }
        document.getElementById("scoExt").textContent = i;
    }
 
		document.getElementById('inc').addEventListener('click', incNumber());
		document.getElementById('dec').addEventListener('click', decNumber());
 
  </script>
 
<div id="divScore" align="center">
	<div id="scoDom" class="score sc1">0</div>
 
	<div id="scoExt" class="score sc2">0
 
		<div id="plusExt" class="addscoreExt">
				<img id="inc" src="images/challenge_score_addgoals.png">
		</div>
 
		<div id="minusExt" class="removescoreExt">
				<img id="dec" src="images/change_score_removegoals.png">
		</div>
	</div>
</div>

et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#divScore {
 
  width: auto;
}
 
#scoDom {
 
    position: absolute;
    width: 100px;
    float : left;
    background-color: aliceblue;
}
 
#scoExt {
 
    position: absolute;
    width: 100px;
    float : right;
    background-color: aliceblue;
}
 
.score.sc1 {
 
    border-radius: 5px 0 0 5px;
    /* top: 125px; */
}
 
.addscoreExt {
 
  top: -60px;
  right: -27px;
  position: absolute;
}
 
.removescoreExt {
 
  top: 10px;
  right: -27px;
  position: absolute;
}
 
.score.sc2 {
 
  border-radius: 0 5px 5px 0;
  /* top: 125px; */
  left: 110px;
}
 
.score {
 
  font-size: 6em;
  line-height: 1em;
  width: 105px;
  height: 97px;
  letter-spacing: -1px;
  color: cadetblue; /* changer si = 0 (blanc) pour betonscore ou rouge si perdu (résultat connu) */
  background: #fff;
  text-align: center;
  border: 0 none;
  font-family: fantasy;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
 
.button {
 
  cursor: pointer;
}

**bajoe** · 06/06/2016, 14h21

On me dit cannot read property 'addEventListener' of null

**chadoum** · 06/06/2016, 14h35

Envoyé par bajoe

@chadoum, je vois que tu me dis de ne pas utiliser de balise <a> pour éviter de recharger la page mais dans ton exemple, je les retrouve..

Non j'ai dit de faire attention aux href vides ! Reprends mon code et fais le test

**SpaceFrog** · 06/06/2016, 14h45

il faut savoir QUAND faire le addEventListener ...
Il faut attendre que l'objet cible de l'addEventListener existe
Donc soit tu mets le script après tes balise ou tu lances une fonction d'initialisation dasn le onload du body ...

Et accessoiremetn oui evites les href inutiles

**bajoe** · 07/06/2016, 17h33

Vous êtes géniaux !!!!!

Increment/Decrement valeur div via évènements sur images

JavaScript

Vue hybride

Partager

Partager