Изображение 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

Возврат к ВОПРОСЫ.

1. По какой-то причине предупреждение о функции JavaScript не выполняется, что означает, что моя функция не запускается.

2. Я хочу, чтобы пользователь мог редактировать текст внутри <div>. Я имею в виду, когда пользователь нажимает на изображение, он/она должен получить текстовое поле, которое позволяет ему/ей изменять текстовое содержимое <div id="desc">. Можно ли это сделать, используя только JavaScript. Если да, то как?

Answer 1

Ваш первый не является проблемой, потому что вы используете JSFiddle с «обернуть сценарий в OnLoad», что означает, что функция существует только в том случае OnLoad и недоступен для событий щелчка.

Updated Fiddle, где код оставлен необработанным.

Вы можете сделать что-нибудь с JavaScript, в значительной степени. Принятие ввода пользователем ничего. На самом деле это просто var userinput = prompt("Type something","Default value");, но на самом деле вы хотите изучить некоторые вещи, такие как document.createElement, Element.appendChild и т. Д., Чтобы создать элемент textarea и показать его пользователю.

Answer 2

Ваша скрипка работает для меня, если бы я изменить функцию JS, как показано ниже на onLoad:

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

Проверить Jsfiddle

Чтобы изменить содержание в вашей DIV, используйте innerHTML

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