Comment onclick un élément et ajouter du texte dans un autre élément

Je jure que j'ai essayé de trouver réponse à cette question partout sur ce forum et google en général et n'ont pas trouvé de solution. Probablement parce que j'ai complètement tort. J'essaye de coder en javascript pur, et je veux que l'utilisateur clique sur une image, alors l'incrément de compte montre vers la droite de l'image.Comment onclick un élément et ajouter du texte dans un autre élément

Dans ma fonction counter (getpic), j'obtiens un message d'erreur indiquant que "document.getElementById (cat) .innerHTML = count;" est nul. J'ai vérifié et revérifié et rien n'est nul. Je pense que cela a quelque chose à voir avec le fait que l'onclick est attaché à l'image et ne peut pas communiquer avec l'élément paragraph, mais je suis un newb et je n'ai même pas été capable de trouver une solution de contournement en javascript pur est le cas.

html

<!DOCTYPE html> 
<html> 

<head> 

<title>Cat Click</title> 


</head> 


<body> 

<div id="container" style="white-space:nowrap"> 
     <div style="display:inline;"> 
      <div onClick="counter(this.id)" id="Cat pic 1"> 
      <img src="http://example.com/pic1.png" height="400" width="400"> 
      <p id="Cat id 1" style="display:inline; white-space:nowrap;"></p> 
      </div> 
     </div> 
</div> 


<div id="container" style="white-space:nowrap"> 
     <div style="display:inline;"> 
      <div onClick="counter(this.id)" id="Cat pic 2"> 
      <img src="http://example.com/pic2.png" height="400" width="400" > 
      <p id="Cat id 2" style="display:inline; white-space:nowrap;"></p> 
      </div> 
     </div> 
</div> 

<div id="container" style="white-space:nowrap"> 
     <div style="display:inline;"> 
      <div onClick="counter(this.id)" id="Cat pic 3"> 
      <img src="http://example.com/pic3.png" height="400" width="400" > 
      <p id="Cat id 3" style="display:inline; white-space:nowrap;"></p> 
      </div> 
     </div> 
</div> 

<div id="container" style="white-space:nowrap"> 
     <div style="display:inline;"> 
      <div onClick="counter(this.id)" id="Cat pic 4"> 
      <img src="http://example.com/pic4.png" height="400" width="400" > 
      <p id="Cat id 4" style="display:inline; white-space:nowrap;"></p> 
      </div> 
     </div> 
</div> 


<div id="container" style="white-space:nowrap">   
     <div style="display:inline;"> 
      <div onClick="counter(this.id)" id="Cat pic 5" > 
      <img src="http://example.com/pic5.png" height="400" width="400" > 
      <p id="Cat id 5" style="display:inline; white-space:nowrap;"></p> 
      </div> 
     </div> 
</div> 

<script src="catclick.js"></script> 





</body> 


</html>

Javascript

var count1 = 0; 
var count2 = 0; 
var count3 = 0; 
var count4 = 0; 
var count5 = 0; 

idCats = ["Cat id 1", "Cat id 2", "Cat id 3","Cat id 4","Cat id 5"] 
picCats = [null, "Cat pic 1", "Cat pic 2", "Cat pic 3","Cat pic 4","Cat pic 5"] 
idCount = [null, count1, count2, count3, count4, count5] 



function counter(getpic) { 
    for (var i = 1; i < 6; i++) { 

      if (getpic===picCats[i]) { 
       var countIndex = idCount[i]; 
       console.log(countIndex); 
       countIndex++ 
       count = countIndex; 
       console.log(count); 
       var catid = "Cat id " + i; 
       console.log(catid); 
       var cat = document.getElementById(catid); 
       console.log(count); 
       console.log(cat); 
       debugger 
       document.getElementById(cat).innerHTML = count; 
      } 

    } 
}

Source

2017-06-20 Anonymous

Dans votre exemple de code, la variable cat est un élément DOM réel que vous avez récupéré 4 lignes ci-dessus:

var cat = document.getElementById(catid);

La ligne en question devrait se lire:

cat.innerHTML = count;

Source

2017-06-20 13:21:20

Vous écrivez ce de cette façon:

var cat = document.getElementById(catid); 
... 
document.getElementById(cat).innerHTML = count;

qui se traduit par:

var cat = document.getElementById(catid); 
... 
document.getElementById(document.getElementById(catid)).innerHTML = count;

La manière correcte est:

var cat = document.getElementById(catid); 
... 
cat.innerHTML = count;

Source

2017-06-20 13:34:50

Merci les gars! Je réalise maintenant que j'essayais de tirer deux fois de l'élément DOM.

En outre, j'ai réalisé que mon compte était en train de se réinitialiser car je n'utilisais pas quelque chose comme splice pour mettre à jour mon tableau de nombre.

Cela fonctionne maintenant!

Merci encore.

Source

2017-06-21 11:48:35

Comment onclick un élément et ajouter du texte dans un autre élément

Répondre

Questions connexes