basically I want to visually let the user know that the data has change when he clicked a button.
Everytime user click a different button, same div has to disappear and fade-in again.
I have tried toggle and transition but it's not workig, you can see it works only when you click for the first time!
Thank you!
function showMe(n){
let myDiv = document.getElementById('myDiv');
myDiv.innerHTML = n==1?"Hello Data":"Another Data";
myDiv.style.opacity = '1';
}#myDiv {
width: 300px;
height: 300px;
border: 2px solid black;
opacity: 0;
transition: opacity 1s;
}<div id="myDiv"></div>
<button onclick="showMe(1)">ShowData</button>
<button onclick="showMe(100)">AnotherData</button>function showMe(n){
let myDiv = document.getElementById('myDiv');
myDiv.style.opacity = '0';
setTimeout(function(){
myDiv.innerHTML = n==1?"Hello Data":"Another Data";
myDiv.style.opacity = '1';
}, 1000);
}#myDiv {
width: 200px;
height: 200px;
border: 2px solid black;
opacity: 0;
transition: opacity 1s;
}<div id="myDiv"></div>
<button onclick="showMe(1)">ShowData</button>
<button onclick="showMe(100)">AnotherData</button>