버튼 누를때 dataset 받아오지 못하는 문제 해결

유형

javaScript

HTML

문제해결

Date

프로젝트

문제

//숙박투두 버튼
let showAddAc = document.createElement("button");
showAddAc.id="showAddAccommodation"+ res.msg.tlIdx;
setAttribute("src", "/img/btn_accommodation.png");
showAddAc.dataset.tlidx = res.msg.tlIdx;
showAddAc.setAttribute("data-tlidx",res.msg.tlIdx);
document.querySelector('#addWhat'+res.msg.tlIdx).appendChild(showAddAc);
showAddAc.addEventListener('click', ev => {
	let str = ev.target.dataset.tlidx;//값을 받아오지 못한다.
	console.log('str: '+str);
	
	document.getElementById('addAccommodation' + str).style.display = '';
    document.getElementById('addAttraction' + str).style.display = 'none';
    document.getElementById('addBudget' + str).style.display = 'none';
    document.getElementById('addGeneral' + str).style.display = 'none';
    document.getElementById('addTrans' + str).style.display = 'none';
    document.getElementById('addCardBtn' + str).style.display = 'none';
});
JavaScript
복사

해결

//숙박투두 버튼
let showAddAc = document.createElement("button");
showAddAc.id="showAddAccommodation"+ res.msg.tlIdx;
//showAddAc.setAttribute("src", "/img/btn_accommodation.png");
//showAddAc.dataset.tlidx = res.msg.tlIdx;
//showAddAc.setAttribute("data-tlidx",res.msg.tlIdx);
document.querySelector('#addWhat'+res.msg.tlIdx).appendChild(showAddAc);

//숙박투두 버튼 이미지
let acImg = document.createElement("img");
acImg.src = "/img/btn_accommodation.png"
document.querySelector('#showAddAccommodation'+res.msg.tlIdx).appendChild(acImg);
acImg.dataset.tlidx = res.msg.tlIdx;//버튼이 아니라 이미지에 dataset을 설정
acImg.addEventListener('click', ev => {
	let str = ev.target.dataset.tlidx;
	console.log('str: '+str);
	
	document.getElementById('addAccommodation' + str).style.display = '';
    document.getElementById('addAttraction' + str).style.display = 'none';
    document.getElementById('addBudget' + str).style.display = 'none';
    document.getElementById('addGeneral' + str).style.display = 'none';
    document.getElementById('addTrans' + str).style.display = 'none';
    document.getElementById('addCardBtn' + str).style.display = 'none';
});
JavaScript
복사