-1

我的问题有两个部分。1. 我的 onclick 事件不起作用。2. 我想<div>通过为用户提供一个文本框来更改 a 中的文本来更改<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');
}

我创建了一个小提琴

回到问题。

  1. 由于某种原因，JavaScript 函数警报没有执行，这意味着我的函数没有被触发。

  2. 我希望用户能够编辑<div>. 我的意思是当用户单击图像时，她/他应该得到一个文本框，允许她/他修改<div id="desc">. 是否可以仅使用 JavaScript 来做到这一点。如果是，如何？

4

2 回答 2

3

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

更新了 Fiddle，代码保持原始状态。

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

于 2013-07-12T07:37:50.133 回答
1

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

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

检查Jsfiddle

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

 document.getElementById('desc').innerHTML = "content changed";
于 2013-07-12T07:38:09.033 回答