按钮在第二次点击时激活

Answer 1

因为button元素的on属性是一个无效的属性，必须点击两次按钮才能激活。要保存有关元素的唯一信息，请改用 data-* 属性。

以下是更正后的代码：

function onOf() {
  var bt = document.getElementById("bt");
  var bookmark = document.getElementById("bookmark");

  if (bt.getAttribute("data-on") === "false") {
    bt.setAttribute("data-on", "true");
    bt.innerHTML = "hide";
    bookmark.style.display = "block";
  } else {
    bt.setAttribute("data-on", "false");
    bt.innerHTML = "display";
    bookmark.style.display = "none";
  }
}

<button id="bt" data-on="false" onclick="onOf()">
  display
</button>

<div id="bookmark" style="display: none;">
  <!-- code -->
</div>

Answer 2

您可以使用 classList.toggle('classname') 切换类以隐藏和显示元素。使用辅助类来正确设置元素的样式，而不是使用来自 javascript 的内联样式。然后你可以使用 JS 来切换 classList 取决于 classList

contains

样式类名与否。

我已经展示了一个示例，说明如何使用带有 回调 方法/函数 的适当 eventListsner 来执行此操作，当您单击显示/隐藏按钮时，它会检查 bookmark 元素的 classList。我还使用

.closest

将 DOM 向上移动到将包含元素的包装器。

如果代码有任何不清楚的地方，请告诉我。我也在编码器片段中添加了注释。

// query the button element for 
// use with addEventListsner method
const btn = document.querySelector('.btn');

// callback function that passes the event from the 
// button element when it is pressed
const toggleDisplay = (e) => {
  // a parent element to query using the 
  // built in closest() method by 
  // traversing up the dom using event.target.closest()
  let main = e.target.closest('#main');
  // get the bookmark element to toogle the class
  let bookmark = main.querySelector('#bookmark'); 
  // toggle the hidden in the classList
  bookmark.classList.toggle('hidden')
  // conditional to check if the target bookmark element
  // classList cotinas 'hidden' => is it hidden?
  // then we change the textContent to the proper 
  // content we want shown depending on 
  // classList containing 'hidden' or not
  bookmark.classList.contains('hidden') ?
    e.target.textContent = 'Display' :
    e.target.textContent = 'Hide';
}

// call event listener in javascript with callback
// function rather than an inline onclick attribute in HTML
btn.addEventListener('click', toggleDisplay)

.hidden {
  visibility: hidden
}

<div id="main">
  <button id="bt" class="btn">Display</button>
  <div id="bookmark" class="hidden">This is some content</div>
</div>