提问者:小点点

尝试用JS制作夜间/白天模式按钮


正如我在标题上所写的,我正在尝试通过JS在html上创建夜间/白天模式。 为什么不起作用? 我应该改变什么才能让它工作呢? 两个按钮都坏了。 这是我的密码。

</html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Marcel Duchamp</title>
        <style>
          .js{
            font-weight:bold;
            color:red;
          }
          #first{
            font-weight:bold;
          }
          p{text-indent:15px;}
        </style>
      </head>
      <body style="background-color:#FFD7AD;">
        <h1 style="color:#FF5733;margin-left:5px;">Marcel Duchamp</h1>
        <h2 style="background-color:orange;color:coral;padding:10px">France to USA</h2>
        <p>
          about Marcel Duchamp
        </p>
          <input type="button" value="Night" onclick="
            document.querySelector('body').style.backgroundColor = #686868;
            document.querySelector('body').style.color = 'white';
          ">
          <input type="button" value="Day" onclick="
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';">
      </body>
    </html>

共1个答案

匿名用户

您有一个打字错误,不是onlcick,而是onclick。 并且您的颜色代码#686868中漏掉了一个',它将破坏您的内联JS

工作代码在这里

null

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Marcel Duchamp</title>
  <style>
    .js {
      font-weight: bold;
      color: red;
    }
    
    #first {
      font-weight: bold;
    }
    
    p {
      text-indent: 15px;
    }
  </style>
</head>

<body style="background-color:#FFD7AD;">
  <h1 style="color:#FF5733;margin-left:5px;">Marcel Duchamp</h1>
  <h2 style="background-color:orange;color:coral;padding:10px">France to USA</h2>
  <p>
    about Marcel Duchamp
  </p>
  <input type="button" value="Night" onclick="
  document.querySelector('body').style.backgroundColor = '#686868';
  document.querySelector('body').style.color = 'white';"/>
  <input type="button" value="Day" onclick="
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';"/>
</body>
</html>