Почему не меняется css стиль?

Question

сделал функцию, чтобы при нажатии на кнопку менялся цвет фона, но он меняется на долю секунды и возвраща

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.img-block {
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  width: 250px;
  height: 150px;
}

.logo {
  height: 100%;
  width: auto;
}

.pdf {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}
.show {
  display: block;
}

.remove {
  background-color: red;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    

    

<link href="signin.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    <embed src="10 вопрос.pdf" class="pdf" id=""/>
<main class="form-signin w-100 m-auto">
  
  <form id="form">
    <div class="img-block m-auto">
      <img class="mb-4 logo" src="logo.png" alt="">
    </div>
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
      <label for="floatingInput">Номер задания</label>
    </div>

    <button class="w-100 btn btn-lg btn-primary mt-4" type="submit" id="btn">найти</button>
    
  </form>
</main>


    
  </body>
  <script>
    btn.onclick = function() {
      document.getElementById('form').style.backgroundColor = '#1111'
    }
  </script>
</html>

ется на исходный, в чем проблема

Answer 1

У тега button по умолчанию тип submit. Либо поставьте в тег тип button для него, либо в функции пишите вот так:

btn.onclick = function(e) {
    e.preventDefault();
    document.getElementById('form').style.backgroundColor = '#1111'
}

либо и вовсе уберите тег form. Зачем он вам?

БЛОГ НА HUSL

Почему не меняется css стиль?

Ответы (1 шт):