javascriptについて

以下のように、クリックすると編集できる要素に特定のクラス名を設定しておき、

window.onload でそれらの要素すべてに onclick を設定するようにすれば

クリックできる要素を追加するだけで JavaScript は修正不要になります。

逆に言えばあるテキストを編集可能としたい場合は

<div class="editable"></div>

で囲むだけでよいです。

// すべての editable な div をクリックしたときに changeInput1 が呼ばれるように設定。
window.onload = function() {
    var editables = getEditableElements();
    for (var i = 0; i < editables.length; i++) {
        editables[i].onclick = changeInput1;
    }
}

// すべての <div class="editable"></div> な要素を返す
function getEditableElements() {
    var r = [];
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++)
    {
        var div = divs[i];
        if (div.className.indexOf("editable") >= 0) {
            r.push(div);
        }
    }
    return r;
}

// <div class="editable"> がクリックされたときに内部を <textarea> に変える
function changeInput1() {
    var div = this;
    var text = div.innerHTML;
    text = text.replace(/<br \/>|<br>/gi,"\n");
    div.innerHTML = '<textarea>' + text + '</textarea>';
    div.onclick = "";
    var textarea = div.childNodes[0];
    textarea.onblur = changeText1;
    textarea.focus();
}

// <textarea> から focus が外れたときに textarea を削除
function changeText1() {
    var textarea = this;
    var div = this.parentNode;
    var text = textarea.value;
    text = text.replace(/\r\n|\r|\n/g,'<br />');
    div.innerHTML = text;
    div.onclick = changeInput1;
}