異なるボタンのテキストを切り替えるJavascript機能

Question

私はJavaScriptとWeb開発の新機能です。テキストを追加して保存する複数の領域を持つページを作成しています。各テキスト領域には、読み取り専用と編集可能の間でテキスト領域を切り替えるために使用するIDが異なるButtonがあります。テキストエリアは編集可能であり、テキストが読み込み専用の場合は「編集」されます。

以下の機能は、1つのボタン（editNameBtn）で機能します。私の質問は、テキストを切り替えるには、各ボタンのIDを渡すことができる1つの関数を記述する方法はありますか？各ボタンごとに異なる機能を持たせるのではなく、異なるIDを使用します。

function toggleText(editNameBtn) { 

var el = document.getElementById("editNameBtn").textContent; 

    if (el == "Edit"){ 
    el = "Save"; 
    } else { 
    el = "Edit"; 
    } 
    document.getElementById("editNameBtn").textContent = el; 
} 

Answer 1

function toggleText(editNameBtn) { 
var el = document.getElementById("editNameBtn").textContent; 
    if (el == "Edit"){ 
    el = "Save"; 
    } else { 
    el = "Edit"; 
    } 
    document.getElementById("editNameBtn").textContent = el; 
} 

ようにする必要があります。引用符を削除してください。以下snipetアドレスisuee

function toggleText(editNameBtn) { 
 
var el = document.getElementById(editNameBtn).textContent; 
 
    if (el == "Edit"){ 
 
    el = "Save"; 
 
    } else { 
 
    el = "Edit"; 
 
    } 
 
    document.getElementById(editNameBtn).textContent = el; 
 
    
 
}

<button id="PASSIDHERE" onclick="toggleText('PASSIDHERE')">Edit</button> 
 
<!-- single qutoes in toggleText('PASSIDHERE') and the argument should be same as id -->

Answer 2

あなたは近いました。関数のパラメータを二重引用符で囲むのではなく、渡す必要があります。

var el = document.getElementById(editNameBtn).textContent; 

Answer 3

へ

変更

var el = document.getElementById("editNameBtn").textContent; 

単なる文字列として、あなたの関数にボタンのIDを渡します。

function toggleText(buttonID) { 
    var el = document.getElementById(buttonID).textContent; 

    if (el == "Edit") { 
     el = "Save"; 
    } else { 
     el = "Edit"; 
    } 

    document.getElementById(buttonID).textContent = el; 
} 

Answer 4

コードはこのように更新する必要があります。

function toggleText(btnId) { 

var el = document.getElementById(btnId).innerHTML; 


    if (el == "Edit"){ 
    el = "Save"; 
    } else { 
    el = "Edit"; 
    } 
    document.getElementById(btnId).innerHTML= el; 
} 

そして

にHTMLを使用すると、文字列としてeditNameBtnを渡しているが、それはargumrntでgetElementByIdを上記の機能には、この

<button id='editNameBtn' onclick='toggleText("editNameBtn")'>Edit</button> 

Answer 5

function toggleText(btn_id) { 
var el = document.getElementById(""+btn_id).textContent; 
    if (el == "Edit"){ 
    el = "Save"; 
    } else { 
    el = "Edit"; 
    } 
    document.getElementById(""+btn_id).textContent = el; 
} 

function toggleText(btn_id) { 
 
var el = document.getElementById(""+btn_id).textContent; 
 
    if (el == "Edit"){ 
 
    el = "Save"; 
 
    } else { 
 
    el = "Edit"; 
 
    } 
 
    document.getElementById(""+btn_id).textContent = el; 
 
}

<button id="id1" onclick="toggleText('id1')">Edit</button>