HTML5中怎么隐藏文本

一张图片下面两个字,点击这两个字会出现一首诗,并且保证图片也在,但是那两个字不在了,再点击这首诗,然后变回原来的两个字,图片也在#HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://pic1.zhimg.com/v2-298e5a6619ed865bedd736871d960825_l.jpg">
    <p id="a">俩字</p>
    <p id="b" style="display: none;">一首很长的诗,<br>有两句的诗。</p>
    <script>
        const a = document.getElementById("a");
        const b = document.getElementById("b");
        a.onclick = ()=>{
            a.style.display = "none";
            b.style.display = "block"
        }
        b.onclick = ()=>{
            b.style.display = "none";
            a.style.display = "block"
        }
    </script>
</body>
</html>

有用采纳