如何使用 javascript 隐藏此按钮 onclick？

Question

这是我的 javascript“查看更多”按钮代码。我怎样才能让它在点击时消失？

    function myFunction() {
  var x = document.getElementById("dsec");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "block";
     }
  }
</script>

Answer 1

您需要为您的按钮提供一个 ID，并为您的描述块做同样的事情。

即：

function myFunction() {
  var x = document.getElementById("dsec");
  var btn= document.getElementById("btn");
  if (x.style.display === "none") {
    x.style.display = "block";
    btn.style.display = "none";
  } else {
    x.style.display = "none";
    btn.style.display = "block";
     }
  }
</script>

...或类似的。我不完全确定是什么触发了您的 'myFunction' 或您的参考...但概念就在那里。

将来，值得添加更多上下文和 spell-check 您的代码，以便更轻松地提供帮助。

我还会注意到@Scott Marcus 建议使用实际样式而不是内联内容是更好的整体技术。

Answer 2

你真的应该尽可能避免使用内联样式，而是依赖 CSS 类，这要简单得多：

// Get the references you'll need just once, not every time the function  runs
let content = document.querySelector(".partial");

// Set up event handlers using the modern, standard approach
document.getElementById("seeMore").addEventListener("click", function(){
  this.classList.add("hidden"); // Just add the CSS class
  content.classList.remove("partial"); // Show the full text
});

/* This class can be added or removed to any element when it needs
   to be shown or hidden. */
.hidden { display:none; }

.partial { height:40px; overflow:hidden; }

<div class="partial">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<button type="button" id="seeMore">See More</button>

Answer 3

请检查您的按钮 ID 和选择器，以确保其正确无误，无论如何，这是一个有效的代码。如果需要简单的隐藏按钮，只需将其显示值设置为None即可。这就像更改显示的 css 值，但您只是使用 javascript。您可以使用的另一个选项是将其从我相信的 DOM 中删除。

function myFunction() {
  var x = document.getElementById("button");
  x.style.display = "none"; //just let the css value of button to none
}

<button onclick="myFunction()" id="button">Click Me</button>

var x = document.getElementById('button');
x.onclick = function () {
    document.getElementById('button').remove();
    this.remove();
};

<button onclick="myFunction()" id="button">Click Me</button>

如何使用 javascript 隐藏此按钮 onclick？

How can I hide this button onclick with javascript?

javascript

button