Javascript-getAttribute ()는 첫 번째 요소에서만 작동합니다. [중복]
Dec 11 2020
이것은 내 HTML입니다.
<div class="tool-top">
<ul>
<li><a role="button" id="button" value="bold"><i class="fas fa-bold"></i></a></li>
<li><a role="button" id="button" value="italic"><i class="fas fa-italic"></i></a></li>
</ul>
</div>
이것은 내 JS입니다.
window.onload = function(){
document.getElementById('button').onclick = function(){
var a = this.getAttribute('value');
console.log(a);
}
}
첫 번째 버튼을 클릭하면 '굵게'표시되지만 두 번째 버튼에는 아무것도 표시되지 않습니다.
나는에 모습 이 페이지,하지만 jQuery로 썼다.
답변
blex Dec 11 2020 at 00:01
ID는 항상 고유해야합니다. 여기에 동일한 ID를 가진 두 개의 요소가 있습니다. 대신 클래스를 사용하십시오.
window.onload = function() {
var btns = document.getElementsByClassName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
var a = this.getAttribute('value');
console.log(a);
};
}
};
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="tool-top">
<ul>
<li><a role="button" class="button" value="bold"><i class="fas fa-bold"></i></a></li>
<li><a role="button" class="button" value="italic"><i class="fas fa-italic"></i></a></li>
</ul>
</div>
jQuery가있는 경우 (질문에 태그를 추가했습니다) 다음을 수행 할 수 있습니다.
window.onload = function() {
$('.button').click(function() {
var a = this.getAttribute('value');
console.log(a);
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="tool-top">
<ul>
<li><a role="button" class="button" value="bold"><i class="fas fa-bold"></i></a></li>
<li><a role="button" class="button" value="italic"><i class="fas fa-italic"></i></a></li>
</ul>
</div>