javascript - 隐藏和显示切换/更改按钮颜色，不适用于功能

Question

我有一个奇怪的问题，我有一个隐藏和显示信息并更改颜色的切换按钮。它在我构建代码的页面上完美运行。例如，当开关打开时，按钮背景会改变颜色，当开关关闭时，按钮背景会变回来，因为我正在从数据库中回显数据，所以我必须在函数内调用我的脚本才能使其工作，但现在脚本不改变颜色或按要求工作。我相信这是导致问题的功能，是否有功能的替代方案。

我很新，似乎不知道为什么这不起作用，任何帮助将不胜感激。

   function toggle_visibility(id) {
            var button = document.querySelector('.button');
            button.addEventListener('click', function(event) {
                var target = document.querySelector(button.getAttribute('data-target'));
                if (target.style.display == "none") {
                    target.style.display = "block";
                    button.innerHTML = button.getAttribute('data-shown-text');
                    button.style.backgroundColor = "red";
                     button.style.border = "thick dashed #0000FF";
                } else {
                    target.style.display = "none";
                    button.innerHTML = button.getAttribute('data-hidden-text');
                    button.style.backgroundColor = "blue";
                   
                }
            
            });
               }

    echo("<div id='first_product'>");
        echo("<div class='button' data-target='#text' data-shown-text='Hide'   onclick='toggle_visibility(\"text\")  data-hidden-text='Mich'>" . $_SESSION['Food_Cat_name'] . " </div>");


        
            echo("<div id='text' class ='hidden'>");

Answer 1

这里缺少一个单引号:

onclick='toggle_visibility(\"text\")

添加后为我工作:

onclick='toggle_visibility(\"text\")'