Afficher cacher image JavaScript et PHP

Version imprimable

Bonjour à tous et à toutes ;)

j'ai un p'tit problème dans ma fonction js, je suis pas un grand expert du JavaScript, c'est pour cela que je vous sollicite ;)

Impossible de rendre visible mon image lorsque je clique sur mon lien : <a href="javascript:showOne('.$id.')"> .
Ma fonction php
Code:

1 2 3 4 5 6 protected function url($string, $id) { if (preg_match("/https?:\/\/[^ ]+?(?:\.png|\.gif|\.jpg|\.jpeg)/", $string)) { return preg_replace('/(https?:\/\/([^ ]*)\/([^ \/]*)\.(png|gif|jpg|jpeg))/Ui', '<a href="javascript:showOne('.$id.')">Afficher l'image</a><img id="myim'.$id.'" class="rounded mx-auto d-block" src="$1" title="" style="visibility: hidden;" />', $string); }
Ma fonction Js
Code:

1 2 3 4 5 6 7 8 9 10 function showOne(id) { var img1 = document.getElementById("myim" + id); img1.style.visibility = ""; if(img1.style.visibility == "hidden" ) { img1.style.visibility = "visible"; } else { img1.style.visibility = "hidden"; } }
Merci beaucoup pour votre aide.

26/03/2020, 18h28
NoSmoking

Bonjour,
j'ai du mal à voir ta démarche.

En écrivant :

Code:

img1.style.visibility = "";

tu « vides » la propriété visibilty du style de ton élément

Juste après, tu testes si cette propriété vaut hidden :

Code:

if (img1.style.visibility == "hidden") {

tu ne rentreras donc jamais dans cette condition et tu iras à la case :

Code:

img1.style.visibility = "hidden";

Généralement on utilise la propriété display: none|block|... pour faire se rendu, de plus pourquoi utiliser un élément <a> pour faire ce job, quand il existe l'élément <button> qui est là pour cela.

1 pièce(s) jointe(s)

Bonjour NoSmoking merci pour ta réponse ;)

Après la correction, j'ai comme l’impression que ma fonction js (showOne) ne s’exécute mème pas.

Code:

1
2
3
4
5
6
protected function url($string, $id)
   {  
 
    if (preg_match("/https?:\/\/[^ ]+?(?:\.png|\.gif|\.jpg|\.jpeg)/", $string)) {
 
        return preg_replace('/(https?:\/\/([^ ]*)\/([^ \/]*)\.(png|gif|jpg|jpeg))/Ui', '<button onclick="javascript:showOne('.$id.')">show image</button><img id="m'.$id.'" class="rounded mx-auto d-block" src="$1" title="" style="display: none !important;" />', $string);

Code:

1
2
3
4
5
6
<script> { 
function showOne(id) {
var img1 = document.getElementById("myimg" + id);
    img1.style.display = "block !important";
}
</script>

Coté script HTML tout me semble correcte.
Pièce jointe 549913

Merci

27/03/2020, 09h24
XeGregory

D’après la console de mon navigateur ma fonction js s’exécute bien, sauf quel me renvoie une erreur : TypeError: img1 is null
27/03/2020, 09h41
NoSmoking

Code:

document.getElementById("myimg" + id);

alors que l'on trouve dans ton code HTML

Code:

<img id="myim1" class="rounded mx-auto d-block" src="..." title="" style="display: none !important;" />

l'ID n'est pas correcte, la même entre les deux écritures, de plus vire moi ce !important qui n'apporte rien.
27/03/2020, 11h05
XeGregory

2 pièce(s) jointe(s)
- Oui effectivement problème d'ID, mème avec l'id correcte cela ne fonction pas.
- Si je mes pas le !Important mon image reste visible : display: none n'est pas pris en compte.

Lorsque que l’exécute la fonction la console me renvoie une erreur : TypeError: showone is not defined
Pièce jointe 549951
Code:

1 2 3 4 5 6 <script> { function showone(id) { var img1 = document.getElementById(id); img1.style.display = "block"; } </script>
Pièce jointe 549947
27/03/2020, 11h28
Watilin

Attention à la casse (majuscules / minuscules). showone n’est pas la même chose que showOne.

1 pièce(s) jointe(s)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
   <head>
      <title>Test</title>
   </head>
   <body>
      <div class="card-block">
         <p class="card-text">Mon Image <button onclick="showone(im1)">show image</button><img id="im1" class="rounded mx-auto d-block" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/375px-Image_created_with_a_mobile_phone.png" title="" style="display:none;"></p>
      </div>
        <script type="text/javascript"> { 
         function showone(id) {
           var img1 = document.getElementById(id);
           img1.style.display = "block";
         }
       </script>
   </body>
</html>

Je ne comprend pas l'ID est correcte ,la casse (showone) est bien respecté.:cfou:
Pièce jointe 549990
La console : ReferenceError: showone is not defined.

27/03/2020, 12h46
NoSmoking
Tu as deux erreurs dans ton code.

Une erreur dans le HTML :

Code:

<button onclick="showone(im1)">show image</button>

im1 est une chaine et non une variable JavaScript, il te faut donc mettre des quottes

Code:

<button onclick="showone('im1')">show image</button>

observe la coloration syntaxique.

Une dans le code JavaScript :

Code:

<script type="text/javascript"> {

il te faut supprimer l'accolade ouvrante
Code:

1 2 3 4 5 6 <script> function showone(id) { var img1 = document.getElementById(id); img1.style.display = "block"; } </script>