Javascript 如何通过在pug模板中设置变量来显示/隐藏按钮单击时的预标记

我是第一次使用pug，我一直在设置一个局部变量，只在单击按钮时显示一个div。这就是我所尝试的：

extends layout

block content
  script.
    var something = function () {
      var display = true;
      console.log('hi', display);
    }
  button(href='#', type='button', onclick='something()') Get News Articles
  if display === true
    div.pre-space 
      pre
        code #{jsonArticles}

---

我做错了什么

请注意，只有当浏览器呈现网页时，脚本标记中的Javascript才会运行

所有的Jade/Pug代码都在服务器端运行，这将生成html网页

在当前情况下，您可以在Pug中渲染div.pre-space，并使用CSS将其隐藏。然后，您可以在单击该按钮时使用Javascript显示它

扩展布局

block content
  script.
    var something = function () {
      document.querySelector("div.pre-space").style("display", "block");
    }
  button(href='#', type='button', onclick='something()') Get News Articles
  div.pre-space 
    pre
      code #{jsonArticles}

css:

---

querySelect不是一个函数querySelector应该在那里感谢@ChanchalPrashantTapase指出这一点。我已经纠正了它：这也不起作用…：style.display='block'。。这是我的工作me@ChanchalPrashantTapase很好，你解决了你的问题。如果我的解决方案不起作用，我将尝试修复它。谢谢：

div.pre-space{ display: none;}