单击按钮，一切都消失了

Question

我一直在尝试编写一个代码来模拟这个例子（下面的代码）。

function closeMe(){

     x=document.getElementById("demo");

     x.style.display="none";

 }

function openMe(){

     x=document.getElementById("demo");

      x.style.display="block";

 }

 <h1>Changing the Style</h1>
 <p>JavaScript can change the style of an HTML element.</p>

 <button type="button" onclick="openMe()">Open!</button>
 <button type="button" onclick="closeMe()">Close!</button>

 <p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>

不幸的是，在我下面的代码中，当我单击 "open" 按钮时，所有内容都消失了。我不明白为什么。

function open() {
  x = document.getElementById("demo");
  x.style.display = "block";
}

function close() {
  x = document.getElementById("demo");
  x.style.display = "none";
}

<p id="demo">Click me to change my HTML content (innerHTML).</p>

<p> this shouldnt disappear</p>

<button onclick="open()">open button</button>

<button onclick="close()">close button</button>

谁能给我一些建议？

Answer 1

将显示设置为块时，在 "block"

周围添加引号

function open(){
    x=document.getElementById("demo");
    x.style.display="block";
}

Answer 2

所以这些函数都在window范围内，所以我叫window.function名字。我还在函数中声明了变量，因为它抛出了一些 javascript 错误。

现在通常不需要这些，但我感觉 jsfiddle 使用 "use strict"；这可能会强制这些类型的区别。不过，我愿意接受其他建议。

希望对您有所帮助。

function open() { 
  var x = document.getElementById("demo");
  x.style.display = "block";
}

function close() {
  var x = document.getElementById("demo");
  x.style.display = "none";
}

<!DOCTYPE html>
<html>

<body>

  <p id="demo">Click me to change my HTML content (innerHTML).</p>

  <p> this shouldnt disappear</p>

  <button onclick="window.open();">open button</button>

  <button onclick="window.close();">close button</button>
</body>

</html>

Answer 3

open & close 是保留关键字。您需要重命名关闭和打开方法。

open()方法打开一个新的浏览器window.

关闭 window.

的 close() 方法

Answer 4

您的函数名称已被使用。保持您的代码不变，但您可以测试的函数名称除外，这一切都按预期工作。

  function open123(){
    let x=document.getElementById("demo");
    x.style.display="block";
  }

  function close123(){
    let x=document.getElementById("demo");
    x.style.display="none";
  }

<p id="demo">Click me to change my HTML content (innerHTML).</p>

<p> this shouldnt disappear</p>

<button onclick="open123()">open button</button>

<button onclick="close123()">close button</button>

Answer 5

您需要在函数中使用大写字母并且样式必须在引号之间；

尝试使用干净的代码:)

function Open(){
        x = document.getElementById("demo");
        x.style.display = "block";
    }

        function Close(){
        x = document.getElementById("demo");
        x.style.display = "none";
    }

Answer 6

open() 和 close() 是保留关键字。请更改函数名称，如 openOne() 和 closeOne()，它可以工作。

单击按钮，一切都消失了

Button onclick and everything disappears

javascript

html

buttonclick