Javascriptを使用してイメージをクリックした後に行のテキストを別のテキストに置き換えるにはどうすればよいですか？

Question

これは私のコードの一部にすぎません。サムネイルをクリックすると、大きな画像をサムネイルのフルサイズのファイルに変更する機能があります。しかし、最後の部分である の単語を置き換える方法に問題があります。id = "final"だから私が最初の画像をクリックすると、 "同義語"がそのようにクリックされた画像についての説明などに変わります。あなたのChangeImage()関数の内部

<tr id="photos"> 
    <td><img id="tests" src="examt-nail.jpg" alt="thumbnail" onclick="ChangeImage('exam.jpg');"></td> 
    <td><img id="true" src="kimt-nail.jpg" alt="thumbnail" onclick="ChangeImage('kim.jpg');"></td> 
    <td><img id="hate" src="codingt-nail.jpg" alt="thumbnail" onclick="ChangeImage('coding.jpg');"></td> 
    <td><img id="yellow" src="spongebobt-nail.jpg" alt="thumbnail" onclick="ChangeImage('bob.jpg');"></td> 
    <td><img id="help" src="helpt-nail.png" alt="thumbnail" onclick="ChangeImage('help.png');"></td> 
    </tr> 
    <tr" id="name"> 
    <td colspan="5"><img id="me" src="mestretch.jpg" alt="thumbnail" height="750px" width="750px"></td> 
    </tr> 
    <tr> 
    <td colspan="5" id="final">sometext</td> 
    </tr> 
    </table> 

Answer 1

function ChangeImage(img, desc){ 
 
    document.getElementById("final").innerHTML = desc; 
 

 
}

<td><img id="tests" src="examt-nail.jpg" alt="thumbnail" onclick="ChangeImage('exam.jpg', 'Exam Description');"> 
 
</td> 
 
<div id="final">sometext</div>

終わりにあなたのdiv内のテキストを変更するには、このコードを追加します。

document.getElementById("final").innerHTML = "Your text"; 

また、それを呼び出している間ChangeImage（）関数に引数として渡すことによって、このテキストの変数を作ることができます。

function ChangeImage(img, desc){ 
    //your code 

    document.getElementById("final").innerHTML = desc; 

} 

Answer 2

はあなたがtextContentプロパティを使用することができる要素のテキストを置換したい場合は、次のよう

<td><img id="tests" src="examt-nail.jpg" alt="thumbnail" onclick="ChangeImage('exam.jpg', 'Exam Description');"></td> 

インサイドJSコードは、あなたの関数を変更します。

var elem = document.getElementById('final'); 
elem.textContent = "New Text"; 

あなたはinnerHTML場合にのみ、テキストの変更を使用しないでください。