Image onClick ne fonctionne pas

Question

Mes problèmes ont 2 parties. 1. Mon événement onclick ne fonctionne pas. 2. Je veux changer le texte à l'intérieur d'un <div> en fournissant une zone de texte pour que l'utilisateur change le texte à l'intérieur du <div>.

Permettez-moi de vous montrer mon code pour mieux comprendre cela

HTML:

<div class="img"> 
    <img src="bird-light.png" alt="Klematis" width="110" height="90" onclick="changetext(this)" /> 
<div id="desc" >Add a description of the image by clicking on the bird</div> 
</div> 
<div class="img"> 
    <img src="bird-dark.png" alt="Klematis" width="110" height="90" onclick="changetext(this)" /> 
<div id="desc">Add a description of the image by clicking on the bird </div> 
</div> 

CSS:

div.img{ 
    width:250px; 
    border: 1px solid #0000ff; 
    height: auto; 
    float:left; 
    background-color:#474747; 
    color:#fff; 
} 

JAVASCRIPT:

function changetext(e){  
    alert("hi"); 
    txtarea = document.getElementById('desc'); 
} 

I created a Fiddle

Revenons au NUMÉROS.

1. Pour une raison quelconque, l'alerte de la fonction JavaScript n'est pas exécutée, ce qui signifie que ma fonction n'est pas déclenchée.

2. Je souhaite que l'utilisateur puisse éditer le texte à l'intérieur du <div>. Ce que je veux dire, c'est quand l'utilisateur clique sur l'image, il/elle devrait obtenir une zone de texte qui lui permet de modifier le contenu du texte de la <div id="desc">. Est-il possible de le faire en utilisant seulement JavaScript. Si oui, comment?

Answer 1

Votre premier est un non-problème parce que vous utilisez jsFiddle avec « script enveloppe dans onLoad », ce qui signifie que la fonction existe seulement dans cet événement onload et est indisponible pour les événements de clic.

Updated Fiddle, où le code est laissé brut.

Vous pouvez faire n'importe quoi avec JavaScript, à peu près. Accepter l'entrée de l'utilisateur n'est rien. À son plus simple, c'est juste var userinput = prompt("Type something","Default value");, mais vraiment vous voulez apprendre des choses comme document.createElement, Element.appendChild et ainsi de suite afin de créer un élément textarea et le montrer à l'utilisateur.

Answer 2

Votre violon travaille pour moi, si je change la fonction JS comme ci-dessous à onLoad:

changetext = function (e) { 
    alert("hi"); 
    var txtarea = document.getElementById('desc'); 
} 

Vérifier Jsfiddle

Pour modifier votre contenu dans votre div, utilisez innerHTML

document.getElementById('desc').innerHTML = "content changed";