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

Version imprimable

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:

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/

06/06/2016, 13h40
SpaceFrog

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

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:

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>

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:

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:

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;
}

06/06/2016, 14h21
bajoe

On me dit cannot read property 'addEventListener' of null
06/06/2016, 14h35
chadoum

Citation:

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
06/06/2016, 14h45
SpaceFrog

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
07/06/2016, 17h33
bajoe

Vous êtes géniaux !!!!! :)