I've been grappling with a seemingly simple bug for over an hour and could really use a fresh perspective to help me identify the issue.
In the code snippet below, I am attempting to change the style of two buttons. One button (deleteBtnToDecorate) responds correctly and changes its font size as expected when the function is called.
The other button, however, is proving to be elusive as its font size remains unchanged despite my efforts (doneBtnToDecorate):
changeStyle: function(idNumber){
const liToDecorate = document.getElementById(`id${idNumber}`)
const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
liToDecorate.style.textDecoration = 'line-through'
doneBtnToDecorate.style.fontSize = '0.8rem'
deleteBtnToDecorate.style.fontSize = '1.1rem'
}Things I've attempted:
Console logged clicking on both buttons to ensure correct targeting. All targets are accurate
Manually changed CSS font sizes to rule out Bootstrap issues (even though it would have affected both buttons if that were the case), but: Font successfully changes via CSS, not through DOM manipulation
This is my complete code:
<ul class="item-list-ul">
<li
v-for="(i, index) in items"
:id="`id${index}`"
:key="index">{{ i }}
<div class="item-butons">
<b-button :id="`idDone${index}`" class="done-btn" @click="changeStyle(index)" size="sm" variant="outline-dark">Hecho!</b-button>
<b-button :id="`idDelete${index}`" class="delete-btn" @click="deleteItem(i)" size="sm" variant="warning">Borrar</b-button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'TodoList',
methods: {
changeStyle: function(idNumber){
const liToDecorate = document.getElementById(`id${idNumber}`)
const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
liToDecorate.style.textDecoration = 'line-through'
doneBtnToDecorate.style.fontSize = '0.8rem'
deleteBtnToDecorate.style.fontSize = '1.1rem'
}
}
}
</script>
<style lang="css">
.item-wrapper{
padding: 4vh 3vh 4vh 3vh;
}
.item-list-ul{
margin-right: 4vh;
}
.item-list-ul li{
margin-bottom: 3vh;
}
.item-list-ul li{
font-size: 1.4em !important;
font-weight: 600;
list-style: outside none none;
}
.done-btn{
margin-right: 20px;
font-size: 1rem !important;
font-weight: 600 !important;
}
.delete-btn{
font-size: 0.9rem;
font-weight: 600 !important;
}
</style>