What would be the best method to reduce the amount of code used? Eventually I will have around 20 buttons so it seems unnecessary to write the variable and the if statements out this many times. Can someone please suggest an approach to this with reduced, cleaner code? Would it help to put the variables into an array?
var art1 = document.getElementById("article1").textContent;
var button1 = document.getElementById("btn1");
var art2 = document.getElementById("article2").textContent;
var button2 = document.getElementById("btn2");
var art3 = document.getElementById("article3").textContent;
var button3 = document.getElementById("btn3");
if (true) {
button1.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art1;
});
}
if (true) {
button2.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art2;
});
}
if (true) {
button3.addEventListener("click", function() {
document.getElementById("fillMe").innerHTML = art3;
});
}
.article {
display: none;
}
<div id="article1" class="article">
Article 1
</div>
<div id="article2" class="article">
Article 2
</div>
<div id="article3" class="article">
Article 3
</div>
<button class ="button" id="btn1">Button 1</button>
<button class ="button" id="btn2">Button 2</button>
<button class ="button" id="btn3">Button 3</button>
<div id="fillMe"></div>
Aucun commentaire:
Enregistrer un commentaire