Andrew1985
Programmer
Hi there, I'm trying to code myself a dynamic editing system for my forums that lets a user double click their message and edit it right there rather than going through a 2 page step. I've run into some snags in the frontend... Here's what I have so far
function init()
{
var textareas = document.getElementsByTagName('textarea');
for (i = 0; i < textareas.length; i++)
{
var thisId = textareas.id.substr(1);
referenceDiv = document.getElementById('b' + thisId);
referenceDiv.onmouseover = function () { this.className = 'edithover'; }
referenceDiv.onmouseout = function () { this.className = 'cell2'; }
referenceDiv.ondblclick = function () {
editArea = document.getElementById('e' + thisId);
editArea.value = this.innerHTML;
editArea.style.display = '';
editArea.focus();
this.style.display = 'none';
}
}
}
window.onload = init;
</script>
</head>
<body>
<div class=cell1 id=m55637><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0007 </div>
<div id="b55637" class=cell2>I loved that game.
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55637" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
<div class=cell1 id=m55638><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0008 </div>
<div id="b55638" class=cell2>I enjoyed this game a lot
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55638" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
<div class=cell1 id=m55639><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0009 </div>
<div class=cell2 id="b55639">I did not enjoy this game
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55639" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
What's wrong with this is that whenever I dblclick a div the information/events are all triggered to the last textarea rather than their respected textareas. Could anyone out there help out and explain why this is happening and how to fix it?
Thanks!
function init()
{
var textareas = document.getElementsByTagName('textarea');
for (i = 0; i < textareas.length; i++)
{
var thisId = textareas.id.substr(1);
referenceDiv = document.getElementById('b' + thisId);
referenceDiv.onmouseover = function () { this.className = 'edithover'; }
referenceDiv.onmouseout = function () { this.className = 'cell2'; }
referenceDiv.ondblclick = function () {
editArea = document.getElementById('e' + thisId);
editArea.value = this.innerHTML;
editArea.style.display = '';
editArea.focus();
this.style.display = 'none';
}
}
}
window.onload = init;
</script>
</head>
<body>
<div class=cell1 id=m55637><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0007 </div>
<div id="b55637" class=cell2>I loved that game.
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55637" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
<div class=cell1 id=m55638><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0008 </div>
<div id="b55638" class=cell2>I enjoyed this game a lot
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55638" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
<div class=cell1 id=m55639><STRONG>From:</STRONG> Andrew | Owner | <STRONG>Posted:</STRONG> 2/21/2006 4:53:17 PM | #0009 </div>
<div class=cell2 id="b55639">I did not enjoy this game
<br />
---
<br />This is a signature</div>
<div style="padding:0;margin:0"><form action="#"><textarea id="e55639" class="editbox" name="messageBody" style="display:none"></textarea></form></div>
What's wrong with this is that whenever I dblclick a div the information/events are all triggered to the last textarea rather than their respected textareas. Could anyone out there help out and explain why this is happening and how to fix it?
Thanks!