Changer une image en fonction d'un compteur

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

j'essaye la même chose... que dans cette discussion.

je débute totalement en javascript et je voudrais faire en sorte que, quand la valeur de mon input arrive à un certain nombre, l'emoji change : Pièce jointe 537231

Mon code :

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
<script>
	function array(){
		emojisourire= new Image();
		emojisourire.src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f642.svg";
 
		emojicontent= new Image();
		emojicontent.src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f600.svg";
 
		emojigrandsourire= new Image();
		emojigrandsourire.src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60a.svg";
 
		emojilunettesnoires= new Image();
		emojilunettesnoires.src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60e.svg";
 
		tabEmojis= [emojisourire,emojicontent,emojigrandsourire,emojilunettesnoires];
 
	function actualiseEmoji()
	{
		var compteur = document.getElementById("compteur").value; //récupère la valeur de l'input
 
		valeur1 = ++i;
		document.getElementById('compteur').value=document.getElementById("emoji").src;
	}
</script>
<div>
	<input type="number" id="compteur" min="0" onchange="actualiseEmoji();">
	<span id="emoji">	</span>
</div>

Bonjour,

Code:

1
2
3
4
<div>
  <input type="number" id="compteur" value="0" min="0" onchange="actualiseEmoji();">
  <span><img id="emoji" style="width:24px;"/></span>
</div>

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
"use strict";
  // Initialisation des constantes
  const input_compteur = document.getElementById("compteur");
  const img_emoji = document.getElementById("emoji");
  const tab_emojis = [
    "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f642.svg", // 0 : emojisourire
    "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f600.svg", // 1 : emojicontent
    "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60a.svg", // 2 : emojigrandsourire
    "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60e.svg", // 3 : emojilunettesnoires
  ];
  // changement d image en fonction du compteur
  function actualiseEmoji()
  {
    var compteur = input_compteur.value; //récupère la valeur de l'input
    if( compteur < 5 ){
      img_emoji.src = tab_emojis[0];
    } else if( compteur >= 5 && compteur < 10){
      img_emoji.src = tab_emojis[1];
    } else if( compteur >= 10 && compteur < 20){
      img_emoji.src = tab_emojis[2];
    } else if( compteur >= 20){
      img_emoji.src = tab_emojis[3];
    }
  }
  // au chargement
  actualiseEmoji();

VARIANTE : comme ce ne sont que des icônes, on peut les mettre en background-image du span (sans balise <img/>) :

Code:

1
2
3
4
<div>
  <input type="number" id="compteur" value="0" min="0" onchange="actualiseEmoji();">
  <span id="emoji" style="display:inline-block;width:24px; height:24px;background-size:cover;"/></span> 
</div>

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
"use strict";
// Initialisation des constantes
const input_compteur = document.getElementById("compteur");
const img_emoji = document.getElementById("emoji");
const tab_emojis = [
  "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f642.svg", // 0 : emojisourire
  "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f600.svg", // 1 : emojicontent
  "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60a.svg", // 2 : emojigrandsourire
  "https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60e.svg", // 3 : emojilunettesnoires
];
// changement d image en fonction du compteur
function actualiseEmoji()
{
  var compteur = input_compteur.value; //récupère la valeur de l'input
  if( compteur < 5 ){
    img_emoji.style.backgroundImage = 'url('+tab_emojis[0]+')';
  } else if( compteur >= 5 && compteur < 10){
    img_emoji.style.backgroundImage = 'url('+tab_emojis[1]+')';
  } else if( compteur >= 10 && compteur < 20){
    img_emoji.style.backgroundImage = 'url('+tab_emojis[2]+')';
  } else if( compteur >= 20){
    img_emoji.style.backgroundImage = 'url('+tab_emojis[3]+')';
  }
}
// au chargement
window.onload = actualiseEmoji;

Salut
Une variante, surtout pour le choix de l'index de la variable tableau tabEmojis

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
		<div>
			<input type="number" id="compteur" min="0" max="20"onchange="actualiseEmoji();">
			<img id="emoji" src="" height="25px">
		</div>
		<script>
                        //*********************************************************************************** 
                var tabEmojis;
                creationArray();
 
                function creationArray(){
                        emojisourire="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f642.svg";
                        emojicontent="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f600.svg";
                        emojigrandsourire="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60a.svg";
                        emojilunettesnoires="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f60e.svg";
                        emojisuper="https://ps.w.org/emoji-in-comments/assets/icon-128x128.png?rev=2164750";
 
                        tabEmojis= [emojisourire,emojicontent,emojigrandsourire,emojilunettesnoires,emojisuper];
                        document.getElementById("compteur").value+0;
                        actualiseEmoji();
                }
 
                function actualiseEmoji(){
                        var compteur = document.getElementById("compteur").value; //récupère la valeur de l'input
                        valeur = parseInt(compteur/5);
                        //console.log("valeur = "+valeur);
                        document.getElementById("emoji").src = tabEmojis[valeur];
                }
        </script>

Re

Il me semblait bien avoir fait des essais avec des symboles HTML Unicode

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
		<div>
			<input type="number" id="compteur" min="0" max="20"onchange="actualiseEmoji();"><span id="emoji" style="font-size:35px"></span>
		</div>
		<script>
                        //*********************************************************************************** 
                var tabEmojis;
                creationArray();
                function creationArray(){
                        // source: https://unicode-table.com/fr/blocks/supplemental-symbols-and-pictographs/
                        emojisourire="🤨";
                        emojicontent="🤥";
                        emojigrandsourire="🥺";
                        emojilunettesnoires="🥰";
                        emojisuper="🤩";
 
                        tabEmojis= [emojisourire,emojicontent,emojigrandsourire,emojilunettesnoires,emojisuper];
                        document.getElementById("compteur").value=0;
                        actualiseEmoji();
                }
                function actualiseEmoji(){
                        var compteur = document.getElementById("compteur").value; //récupère la valeur de l'input
                        valeur = parseInt(compteur/5);
                        //console.log("valeur = "+valeur);
                        document.getElementById("emoji").innerHTML = tabEmojis[valeur];
                }
        </script>

10/02/2020, 20h02
Ma vie en vert

Merci beaucoup :love:Juste un détail : comment faire pour que l'emoji change au défilement sans relâcher la flèche ?

Salut

Remplaces l’événement déclencheur onchange par oninput

Édit:
Par contre il faut traiter l'entrée au clavier, donc la fonction actualiseEmoji() devient

Code:

1
2
3
4
5
6
7
8
9
		function actualiseEmoji(){
			var compteur = document.getElementById("compteur"); //récupère la valeur de l'input
			if (compteur.checkValidity() == false || compteur.value === ""){
				valeur = 5;
			}else{
				valeur = parseInt(compteur.value/5);
			}
			document.getElementById("emoji").innerHTML = tabEmojis[valeur];
		}

Mais aussi ajouter un émoji dans la fonction creationArray()

Code:

1
2
3
			emojierreur="😈";
 
			tabEmojis= [emojisourire,emojicontent,emojigrandsourire,emojilunettesnoires,emojisuper,emojierreur];

problème

Salut, l'emoji ne s'affiche pas...

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
<div>
			<input type="number" id="compteur" min="0" max="20"oninput="actualiseEmoji();"><span id="emoji" style="font-size:35px"></span>
		</div>
		<script>
                        //*********************************************************************************** 
                var tabEmojis;
                creationArray();
                function creationArray(){
                        // source: https://unicode-table.com/fr/blocks/supplemental-symbols-and-pictographs/
                        emojisourire="🤨";
                        emojicontent="🤥";
                        emojigrandsourire="🥺";
                        emojilunettesnoires="🥰";
                        emojisuper="🤩";
                                                emojierreur="😈";
                                                
                        tabEmojis= [emojisourire,emojicontent,emojigrandsourire,emojilunettesnoires,emojisuper,emojierreur];
                        document.getElementById("compteur").value=5;
                        actualiseEmoji();
                }
                function actualiseEmoji(){
                        var compteur = document.getElementById("compteur"); //récupère la valeur de l'input
                        if (compteur.checkValidity() == false || compteur.value === ""){
                                valeur = 5;
                        }else{
                                valeur = parseInt(compteur.value/5);
                        }
                        document.getElementById("emoji").innerHTML = tabEmojis[valeur];
                }
                }
        </script>

Bonjour,

on t'a donné au moins 4 codes différents.
A toi de prendre celui que tu comprends.

En voilà un autre : https://codepen.io/jreaux62/pen/mdJJzmx

Code:

1
2
3
<div>
  <input type="number" id="compteur" min="0" max="20" /><span id="emoji" style="font-size:24px"></span>
</div>

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
"use strict";
// Initialisation des constantes
const input_compteur = document.getElementById("compteur");
const span_emoji = document.getElementById("emoji");
const tab_emojis = [
  "🙂", // 0
  "😀", // 1
  "😘", // 2
  "😍", // 3
];
// changement d image en fonction du compteur
function actualiseEmoji()
{
  var compteur = input_compteur.value; //récupère la valeur de l'input
  if( compteur < 5 ){
    span_emoji.innerHTML = tab_emojis[0];
  } else if( compteur >= 5 && compteur < 10){
    span_emoji.innerHTML = tab_emojis[1];
  } else if( compteur >= 10 && compteur < 20){
    span_emoji.innerHTML = tab_emojis[2];
  } else if( compteur >= 20){
    span_emoji.innerHTML = tab_emojis[3];
  }
}
// au chargement
window.onload = actualiseEmoji;
input_compteur.addEventListener('input', actualiseEmoji);

11/02/2020, 14h10
Ma vie en vert

Celui-ci est parfait ! :merci::bravo: