Image onClick不起作用

-1

我的問題有2個部分。 1.我的onclick事件不起作用。 2.我想更改<div>中的文本，方法是提供一個文本框供用戶更改<div>中的文本。Image onClick不起作用

讓我告訴你我的代碼，以更好地理解這種

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。如果是，如何？

來源

2013-07-12 AnaMaria

首先id必須是唯一的，否則沒有簡單的方法可以在你的小提琴中獲得id desc的第二個元素 – bugwheels94

See thi使網格的可編輯的網址：http://stackoverflow.com/questions/2441565/how-do-i-make-a-div-element-editable-like-a-textarea-when-i-click-it – Zhanger

你首先是因爲你使用的jsfiddle與「中的onLoad包裝腳本」，這意味着該函數只存在於那onload事件和不可用的單擊事件一個非問題。

Updated Fiddle，其中代碼保持原狀。

你幾乎可以用JavaScript做任何事情。接受用戶輸入什麼都不是。最簡單的就是var userinput = prompt("Type something","Default value");，但是你真的想學習一些東西，比如document.createElement,Element.appendChild等，以便創建一個textarea元素並將其顯示給用戶。

來源

2013-07-12 07:37:50

那麼。謝謝。你能指導我一個資源或教程，可以幫助我嗎？ – AnaMaria

@AnaMaria [Mozilla開發者網絡]（https://developer.mozilla.org/en-US/docs/Web/JavaScript）學習的好地方。 – Praveen

我有這麼遠... http：// jsfiddle。net/qbXcw/10/ – AnaMaria

你搗鼓爲我工作，如果我改變了JS功能類似下面的onLoad：

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

檢查Jsfiddle

要在DIV編輯內容，請使用innerHTML

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

來源

2013-07-12 07:38:09 Praveen

酷。現在我的問題的第二部分是什麼。這是一個挑戰... – AnaMaria

@AnaMaria闡明瞭你的問題。 ID應該是唯一的，所以在兩者中都將它改爲'class =「desc」'。 – Praveen

Image onClick不起作用

回答

相關問題