Textboxで画像にも内部リンクを張れるようにする
現状はテキストだけの内部リンクを画像にも貼りたい
リンクのクリックイベントはどう設定されているか？
code:old.js
function setOnClickEvent(targetarea){
var areaPalm = (targetarea == "body") ? "body" : "#" + targetarea;
const btnObj = document.querySelectorAll(areaPalm + " .linkbtn");
for( let i = 0 ; i < btnObj.length ; i ++ ) {
btnObji.onclick = function(){ if (! (targetarea == "xhr-result3")){
nowPage = "list/" + btnObji.innerText +".md"; normalDraw(nowPage);
}else if (targetarea == "xhr-result3"){
nowSubPage = "list/" + btnObji.innerText +".md"; subPage.drawPage(nowSubPage)
}
};
}
}
やっていること
そのフィールドにあるlinkbtnclassの要素にクリックイベントを付与している
要素内のinnerTextから呼び出すファイル名を生成している
これを画像に置き換えればいい
code:script.js
function setOnClickEvent(targetarea){
var areaPalm = (targetarea == "body") ? "body" : "#" + targetarea;
const btnObj = document.querySelectorAll(areaPalm + " .linkbtn");
for( let i = 0 ; i < btnObj.length ; i ++ ) {
btnObji.onclick = function(){ if (! (targetarea == "xhr-result3")){
if (btnObji.nodeName == "IMG"){ //IMGタグならaltのテキストを使う
nowPage = "list/" + btnObji.getAttribute('alt') +".md"; }else{
nowPage = "list/" + btnObji.innerText +".md"; }
normalDraw(nowPage);
}else if (targetarea == "xhr-result3"){
nowSubPage = "list/" + btnObji.innerText +".md"; subPage.drawPage(nowSubPage)
}
};
}
}
やっていること
まず、要素のnodeNameでそのタグを確認し、IMGとそれ以外で切り分けている
IMGにはinnerTextがないので、替わりにalt属性を使う
リンクのテキストに設定するもの（ファイル名）をalt属性に書いておけばいい
結果
https://gyazo.com/da1d099580e0b7f8ad0b3892ad5a8d00
ref.