Discussion :

[XeGregory]

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 PHP :

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

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 :

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

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.

[NoSmoking]

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

En écrivant :

Code :

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

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 :

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

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

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

Code :

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

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.

[XeGregory]

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 :

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

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 :

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

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.


Merci

[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

[NoSmoking]

Code :

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

document.getElementById("myimg" + id);

alors que l'on trouve dans ton code HTML

Code html :

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

<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.

[XeGregory]

- 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

Code :

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

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

[Watilin]

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

[XeGregory]

Code html :

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
<!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é.

La console : ReferenceError: showone is not defined.

[NoSmoking]

Tu as deux erreurs dans ton code.

Une erreur dans le HTML :

Code html :

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

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

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

Code html :

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

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

observe la coloration syntaxique.


Une dans le code JavaScript :

Code :

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

<script type="text/javascript"> {

il te faut supprimer l'accolade ouvrante

Code html :

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

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