1

function check_email() {
  var at_present = false;
  var email = document.getElementById("email").value;
  if (email !== "") {
    for (let i = 0; i <= email.length; i++) {
      if (email[i] === "@") {
        at_present = true;
        break;
      }
    }
    if (at_present == false) {
      alert("Invalid email! @ missing");
    }
  }
}
h1 {
  text-align: center;
}

.background {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/diffusion-library.appspot.com/o/soldiers-at-a-distance-fighting-in-a-savana-biome-high-quality-little-blurred%2F1.jpg?alt=media&token=559b6e72-c738-4b56-889c-d4ad6466548d");
  background-size: 1600px;
  position: center;
  background-position-y: -300px;
  filter: blur(8px);
}
<!DOCTYPE html>
<html>

<head>
  <title>MODULO ISCRIZIONE SOFTAIR</title>
  <link rel="stylesheet" href="Modulo_softair_css.css">
</head>

<body>

  <div class="background"></div>

  <h1>MODULO ISCRIZIONE SOFTAIR</h1>

  <div class="content">

    <strong>Nome:</strong>
    <br>
    <input type="text" id="nome">
    <br>
    <br>
    <strong>Numero di Telefono:</strong>
    <br>
    <input type="text" id="telefono">
    <br>
    <br>
    <strong>Email:</strong>
    <br>
    <input type="text" id="email" onchange="check_email()">
  </div>


  <script>
  </script>
</body>

</html>

The background isn't loading I don't know why. Before adding the div and class the background was loading correctly. Can somebody help me figure out why? This program is meant to be a web page for a form about softair, and I wanted to add a photo to the background with a blurred effected so that it wouldn't disturb. As I said before, I had the background in the body without the div, but when I tried to blur, it blurred the whole body. So i made the class but now it isn't working.

Thanks

Tried removing some adjectives form the css but I had no luck.

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
SGTMM
  • 31
  • 5
  • 2
    Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`). The dev tools provide an **Inspector** / **Elements** tab. Inspect your elements. Are the applied CSS rules correct? The dev tools provide a **Network** tab. Is the resource _found_ (e.g. HTTP 200 response)? If not, is it blocked by an extension or the browser? Which _actual URL_ is requested? Amend the URL accordingly. Is the MIME type correct? Look into the **Response** tab inside the Network tab: do you see the image? Make sure your background is on a _visible_ element with _positive height and width_. – Sebastian Simon Jan 26 '23 at 14:02
  • In this case you don't set any dimension to the div with class `.background`. Set the correct dimensions and you will see the background image. N.B. [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) value center is not correct. – Sfili_81 Jan 26 '23 at 14:11
  • 1
    Also, `i <= email.length` is an [off-by-one error](/q/2939869), `at_present == false` should be replaced by `!at_present`, [`includes`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes) is much simpler than your loop, and inline event handlers like `onchange` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Jan 26 '23 at 14:15
  • 1
    But most importantly, all of your JS code can be removed and `` can be used instead. Don’t do e-mail address validation yourself, unless you’re willing to seek out the RFC standards that specify what an e-mail address can look like, and build your own parser. Use [`setCustomValidity`](//developer.mozilla.org/en/docs/Web/API/HTMLObjectElement/setCustomValidity) to set the error message, see [How to prevent form from being submitted?](/q/3350247/4642212) and [Client-side form validation](//developer.mozilla.org/en/docs/Learn/Forms/Form_validation). – Sebastian Simon Jan 26 '23 at 14:18
  • Thanks everybody, I'm kinda of a newbie and I just wanted to say that many of the choices like the on change, the email check were like that as I have to prepare for an exam and they specifically require you to not use those function. But still thanks to everybody – SGTMM Jan 26 '23 at 16:47

0 Answers0