如何在单击图像时使用切换功能淡入文本？

<div id="container">
  <img src="image.jpg" alt="Image" id="image">
  <p id="text">This is the text to be displayed.</p>
</div>

#container {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

var image = document.getElementById('image');
var text = document.getElementById('text');

image.addEventListener('click', function() {
  if (text.style.opacity === '0') {
    text.style.opacity = '1';
  } else {
    text.style.opacity = '0';
  }
});