图片 onClick 不起作用答案

【问题标题】：Image onClick is not working图片 onClick 不起作用
【发布时间】：2013-07-12 07:33:48
【问题描述】：

我的问题有两个部分。 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

回到问题。

由于某种原因，JavaScript 函数警报没有执行，这意味着我的函数没有被触发。
我希望用户能够编辑<div> 中的文本。我的意思是当用户单击图像时，她/他应该得到一个文本框，允许她/他修改<div id="desc"> 的文本内容。是否可以仅使用 JavaScript 来做到这一点。如果是，如何？

【问题讨论】：

首先 id 必须是唯一的，否则没有简单的方法可以在你的小提琴中获取 id desc 的第二个元素
查看此 url 以使 div 可编辑：stackoverflow.com/questions/2441565/…

标签： javascript html css

【解决方案1】：

您的第一个问题不是问题，因为您正在使用带有“在 onLoad 中包装脚本”的 JSFiddle，这意味着该函数仅存在于该 onload 事件中，并且对点击事件不可用。

Updated Fiddle，代码是原始的。

你几乎可以用 JavaScript 做任何事情。接受用户输入没什么。最简单的就是var userinput = prompt("Type something","Default value");，但实际上你想学习一些诸如document.createElement、Element.appendChild 之类的东西，以便创建一个textarea 元素并将其展示给用户。

【讨论】：

好吧。谢谢。你能指导我找到可以帮助我的资源或教程吗？
@AnaMaria Mozilla Developers Network 学习的好地方。
我会接受这个答案，因为我找到了问题第二部分的解决方案...

【解决方案2】：

如果我在onLoad 更改 JS 函数，您的小提琴对我有用：

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

查看Jsfiddle

要编辑 div 中的内容，请使用 innerHTML

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

【讨论】：

@AnaMaria 阐明了您的问题。 ID 应该是唯一的，因此在两者中都将其更改为 class="desc"。