-1

私の問題には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;
}

ジャバスクリプト:

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

フィドルを作成しました

問題に戻ります。

  1. 何らかの理由で JavaScript 関数アラートが実行されないため、関数がトリガーされません。

  2. ユーザーが 内のテキストを編集できるようにしたい<div>。つまり、ユーザーが画像をクリックすると、テキストボックスが表示され、<div id="desc">. JavaScript のみを使用してこれを行うことは可能ですか。はいの場合、どのように？

4

2 に答える 2

3

「onLoadでスクリプトをラップ」でJSFiddleを使用しているため、最初のものは問題ではありません。つまり、関数はそのonloadイベントにのみ存在し、クリックイベントでは使用できません。

コードが生のままであるFiddle を更新しました。

JavaScript を使えば、ほぼ何でもできます。ユーザー入力を受け入れることは何もありません。最も単純なのは だけですが、実際には textarea 要素を作成してユーザーに表示するために、などvar userinput = prompt("Type something","Default value");を学習する必要があります。document.createElementElement.appendChild

于 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 に答える