Javascript - getAttribute () funktioniert nur für das erste Element [Duplikat]
Dec 11 2020
Das ist mein 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>
das ist mein JS:
window.onload = function(){
document.getElementById('button').onclick = function(){
var a = this.getAttribute('value');
console.log(a);
}
}
Ich werde fett, wenn ich auf die erste Schaltfläche klicke, aber nichts in der zweiten
Ich habe auf dieser Seite nachgesehen, aber sie hat mit Jquery geschrieben.
Antworten
blex Dec 11 2020 at 00:01
Eine ID sollte immer eindeutig sein. Sie haben hier zwei Elemente mit derselben ID. Verwenden Sie stattdessen eine Klasse:
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>
Wenn Sie über jQuery verfügen (Sie haben das Tag zu Ihrer Frage hinzugefügt) , können Sie Folgendes tun:
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>