Creating a web page for a blood bank involves storing blood group information, quantities, and donor lists in an array of cards. However, there seems to be an issue with changing the background color of the donor blood group cards upon selection using JavaScript. The desired light green color change is not happening, and it's challenging to pinpoint the error in the code. Are there any alternative methods to achieve the card color change?
<v-card>
<v-container fluid grid-list-md>
<v-layout row wrap>
**<v-flex v-for="card in cards" :key="card.blood_group">
<v-card class="black--text" height="120px" width="220px" :id="card.blood_group" style="background-color:lightgray">**
<v-flex xs12>
<v-card-title>
<h2 class="justify-center">{{ card.blood_group }}</h2>
</v-card-title>
</v-flex>
</v-card>
<v-flex>
<v-layout column justify-space-between fill-height>
<v-card class="black--text" width="220px" color="grey lighten-2">
<v-divider></v-divider>
<v-card-text>
{{ card.quantity }}</v-card-text>
</v-card>
</v-layout>
</v-flex>
</v-flex>
</v-layout>
</v-container>
<v-layout justify-center xs12 sm3 md3 row wrap>
<v-layout column wrap>
<v-flex xs12 sm5 md5 d-flex offset-sm3>
**<v-autocomplete v-model="select" :items="cards" label="Blood required" item-text="blood_group"
required @change="eligibleDonors"></v-autocomplete>**
</v-flex>
<v-flex xs12 sm6 md4 offset-sm3>
<v-text-field v-model="bottles" label="Number of bottles" readonly></v-text-field>
</v-flex>
</v-layout>
<v-layout column wrap>
<v-flex xs12 sm6 offset-sm3 padding-a-3>
<v-card height="300px" width="450px" style="border: black 3px">
</v-card>
<p style="text-align: center"> Bucket</p>
</v-flex>
</v-layout>
</v-layout>
</v-card> <script>
new Vue({
el: '#app',
data: {
cards: [
{ blood_group: 'A+', quantity: 3, recieve_from: ['A+', 'A-', 'O+', 'O-'] },
{ blood_group: 'B+', quantity: 8, recieve_from: ['B+', 'B-', 'O+', 'O-'] },
{ blood_group: 'O+', quantity: 2, recieve_from: ['O+', 'O-'] },
{ blood_group: 'AB+', quantity: 5, recieve_from: ['A+', 'A-', 'O+', 'O-', 'AB+', 'B+', 'B-', 'AB-'] },
{ blood_group: 'A-', quantity: 9, recieve_from: ['A-', 'O-'] },
{ blood_group: 'B-', quantity: 6, recieve_from: ['B-', 'O-'] },
{ blood_group: 'O-', quantity: 8, recieve_from: ['O-'] },
{ blood_group: 'AB-', quantity: 3, recieve_from: ['AB-', 'A-', 'B-', 'O-'] }
],
select: '',
bottles: '',
card_select: ''
},
methods: {
eligibleDonors(event) {
for (let i = 0; i < this.cards.length; i++) {
if (this.select == this.cards[i].blood_group) {
var selection = i;
break;
}
}
for (let i = 0; i < this.cards[selection].recieve_from.length; i++) {
this.card_select = this.cards[selection].recieve_from[i]
console.log("eligible blood group: " + this.card_select)
**document.getElementById(this.card_select).style.backgroundColor = "green"**
console.log(document.getElementById(this.card_select).style.backgroundColor)
}
}
}
})
</script>