이미지 onClick 작동하지 않습니다

Question

내 문제는 2 부분으로 구성되어 있습니다. 1. 내 onclick 이벤트가 작동하지 않습니다. 2. <div> 내부의 텍스트를 변경하기위한 텍스트 상자를 제공하여 <div> 내부의 텍스트를 변경하고 싶습니다.

내가 당신에게 이해하려면 코드를 보여 드리죠이 더 나은

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

ISSUES으로 돌아갑니다. 내 기능을 의미하는 자바 스크립트 함수 경고가 실행되지 않는 몇 가지 이유를 들어

1. 가 트리거지고 있지 않습니다.

2. 사용자가 <div> 내부의 텍스트를 편집 할 수있게하려고합니다. 내 말은 사용자가 이미지를 클릭하면 텍스트 상자를 가져와 <div id="desc">의 텍스트 콘텐츠를 수정할 수 있도록해야한다는 것입니다. 자바 스크립트 만 사용하면 가능합니까? 그렇다면 어떻게? 당신이 기능은 그 onload 이벤트에 존재하고 클릭 이벤트에 사용할 수없는 것을 의미한다 "는 onLoad에서 랩 스크립트"로 JSFiddle를 사용하고 있기 때문에

Answer 1

첫 번째가 아닌 문제입니다.

Updated Fiddle. 코드는 그대로 남겨 둡니다.

JavaScript로 할 수있는 일은 거의 없습니다. 사용자 입력을 수락하는 것은 아무 것도 아닙니다. 가장 간단한 방법은 var userinput = prompt("Type something","Default value");이지만 실제로는 텍스트 영역 요소를 만들고 사용자에게 표시하기 위해 document.createElement, Element.appendChild 등과 같은 내용을 배우기를 원합니다.

Answer 2

당신의 바이올린은 내가 onLoad에서 다음과 같은 JS 기능을 변경하는 경우, 나를 위해 노력하고 있습니다 :

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

확인 Jsfiddle

, 당신의 사업부에 콘텐츠를 편집 사용하려면 innerHTML

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