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 。

由于某种原因，未执行JavaScript函数警报，这意味着我的函数未被触发。
我希望用户能够编辑<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元素并将其显示给用户。 / p>

Answer 2

如果我在onLoad更改了JS功能，那么你的小提琴对我有用：

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

检查Jsfiddle

要修改div中的内容，请使用innerHTML

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

图片onClick不起作用

2 个答案: