Cannot get css or javascript code to work in my webpage in editor

I cannot get my code to display. Only the html part for a form displays, but not the styling in css or javascript. It is supposed to be a form to display on a link that a user clicks. The form must be hidden, then show, when they click on the link.

<!DOCTYPE html>
<HTML LANG="EN-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="linkforms.js"></script>


</style>
</head>
<body>
<p><button id="modal_open">Open Email Form</button></p>

<div id="modal_wrapper">
<div id="modal_window">

<div style="text-align: right;"><a id="modal_close" href="linkforms.html">close <b>X</b></a></div>

<p>Complete the form below to send an email:</p>

<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
<p><label>Your Name<strong>*</strong><br>
<input type="text" autofocus required size="48" name="name" value=""></label></p>
<p><label>Email Address<strong>*</strong><br>
<input type="email" required title="Please enter a valid email address" size="48" name="email" value=""></label></p>
<p><label>Subject<br>
<input type="text" size="48" name="subject" value=""></label></p>
<p><label>Enquiry<strong>*</strong><br>
<textarea required name="message" cols="48" rows="8"></textarea></label></p>
<p><input type="submit" name="feedbackForm" value="Send Message"></p>
</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->

</body>
</html>

The javascript code in the external file is:

<script>

var modal_init = function() {

    var modalWrapper = document.getElementById("modal_wrapper");
    var modalWindow  = document.getElementById("modal_window");

    var openModal = function(e)
    {
      modalWrapper.className = "overlay";
      var overflow = modalWindow.offsetHeight - document.documentElement.clientHeight;
      if(overflow > 0) {
        modalWindow.style.maxHeight = (parseInt(window.getComputedStyle(modalWindow).height) - overflow) + "px";
      }
      modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
      modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    var closeModal = function(e)
    {
      modalWrapper.className = "";
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    var clickHandler = function(e) {
      if(!e.target) e.target = e.srcElement;
      if(e.target.tagName == "DIV") {
        if(e.target.id != "modal_window") closeModal(e);
      }
    };

    var keyHandler = function(e) {
      if(e.keyCode == 27) closeModal(e);
    };

    if(document.addEventListener) {
      document.getElementById("modal_open").addEventListener("click", openModal, false);
      document.getElementById("modal_close").addEventListener("click", closeModal, false);
      document.addEventListener("click", clickHandler, false);
      document.addEventListener("keydown", keyHandler, false);
    } else {
      document.getElementById("modal_open").attachEvent("onclick", openModal);
      document.getElementById("modal_close").attachEvent("onclick", closeModal);
      document.attachEvent("onclick", clickHandler);
      document.attachEvent("onkeydown", keyHandler);
    }

  };



 if(document.addEventListener) {
    document.getElementById("modal_feedback").addEventListener("submit", checkForm, false);
    document.addEventListener("DOMContentLoaded", modal_init, false);
  } else {
    document.getElementById("modal_feedback").attachEvent("onsubmit", checkForm);
    window.attachEvent("onload", modal_init);
  }




document.getElementById("modal_feedback").addEventListener("submit", function(e) {
  var form = this;
  if(form.name.value == "") {
    alert("Please enter your Name");
    form.name.focus();
    e.preventDefault();
  } else if(form.email.value == "") {
    alert("Please enter a valid Email address");
    form.email.focus();
    e.preventDefault();
  } else if(form.message.value == "") {
    alert("Please enter your comment or question in the Message box");
    form.message.focus();
    e.preventDefault();
  }
}, false);

document.addEventListener("DOMContentLoaded", function() {
  var modalWrapper = document.getElementById("modal_wrapper");
  var modalWindow  = document.getElementById("modal_window");

  var openModal = function(e)
  {
    modalWrapper.className = "overlay";
    modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
    modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";
    e.preventDefault();
  };

  var closeModal = function(e)
  {
    modalWrapper.className = "";
    e.preventDefault();
  };

  var clickHandler = function(e) {
    if(e.target.tagName == "DIV") {
      if(e.target.id != "modal_window") closeModal(e);
    }
  };

  var keyHandler = function(e) {
    if(e.keyCode == 27) closeModal(e);
  };

  document.getElementById("modal_open").addEventListener("click", openModal, false);
  document.getElementById("modal_close").addEventListener("click", closeModal, false);
  document.addEventListener("click", clickHandler, false);
  document.addEventListener("keydown", keyHandler, false);
}, false);



<script> var checkForm = function(e)
  {
    var form = (e.target) ? e.target : e.srcElement;
    if(form.name.value == "") {
      alert("Please enter your Name");
      form.name.focus();
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
      return;
    }
    if(form.email.value == "") {
      alert("Please enter a valid Email address");
      form.email.focus();
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
      return;
    }
    if(form.message.value == "") {
      alert("Please enter your comment or question in the Message box");
      form.message.focus();
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
      return;
    }
  };



 var modal_init = function() {

    var modalWrapper = document.getElementById("modal_wrapper");
    var modalWindow  = document.getElementById("modal_window");

    var openModal = function(e)
    {
      modalWrapper.className = "overlay";
      var overflow = modalWindow.offsetHeight - document.documentElement.clientHeight;
      if(overflow > 0) {
        modalWindow.style.maxHeight = (parseInt(window.getComputedStyle(modalWindow).height) - overflow) + "px";
      }
      modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
      modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    var closeModal = function(e)
    {
      modalWrapper.className = "";
      e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    var clickHandler = function(e) {
      if(!e.target) e.target = e.srcElement;
      if(e.target.tagName == "DIV") {
        if(e.target.id != "modal_window") closeModal(e);
      }
    };

    var keyHandler = function(e) {
      if(e.keyCode == 27) closeModal(e);
    };

    if(document.addEventListener) {
      document.getElementById("modal_open").addEventListener("click", openModal, false);
      document.getElementById("modal_close").addEventListener("click", closeModal, false);
      document.addEventListener("click", clickHandler, false);
      document.addEventListener("keydown", keyHandler, false);
    } else {
      document.getElementById("modal_open").attachEvent("onclick", openModal);
      document.getElementById("modal_close").attachEvent("onclick", closeModal);
      document.attachEvent("onclick", clickHandler);
      document.attachEvent("onkeydown", keyHandler);
    }

  };



 if(document.addEventListener) {
    document.getElementById("modal_feedback").addEventListener("submit", checkForm, false);
    document.addEventListener("DOMContentLoaded", modal_init, false);
  } else {
    document.getElementById("modal_feedback").attachEvent("onsubmit", checkForm);
    window.attachEvent("onload", modal_init);
  }




document.getElementById("modal_feedback").addEventListener("submit", function(e) {
  var form = this;
  if(form.name.value == "") {
    alert("Please enter your Name");
    form.name.focus();
    e.preventDefault();
  } else if(form.email.value == "") {
    alert("Please enter a valid Email address");
    form.email.focus();
    e.preventDefault();
  } else if(form.message.value == "") {
    alert("Please enter your comment or question in the Message box");
    form.message.focus();
    e.preventDefault();
  }
}, false);

document.addEventListener("DOMContentLoaded", function() {
  var modalWrapper = document.getElementById("modal_wrapper");
  var modalWindow  = document.getElementById("modal_window");

  var openModal = function(e)
  {
    modalWrapper.className = "overlay";
    modalWindow.style.marginTop = (-modalWindow.offsetHeight)/2 + "px";
    modalWindow.style.marginLeft = (-modalWindow.offsetWidth)/2 + "px";
    e.preventDefault();
  };

  var closeModal = function(e)
  {
    modalWrapper.className = "";
    e.preventDefault();
  };

  var clickHandler = function(e) {
    if(e.target.tagName == "DIV") {
      if(e.target.id != "modal_window") closeModal(e);
    }
  };

  var keyHandler = function(e) {
    if(e.keyCode == 27) closeModal(e);
  };

  document.getElementById("modal_open").addEventListener("click", openModal, false);
  document.getElementById("modal_close").addEventListener("click", closeModal, false);
  document.addEventListener("click", clickHandler, false);
  document.addEventListener("keydown", keyHandler, false);
}, false);
</script>

The css is:

#modal_wrapper.overlay::before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background: red;
    background: rgba(0,0,0,0.7);
  }

  #modal_window {
    display: none;
    z-index: 200;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 360px;
    overflow: auto;
    padding: 10px 20px;
    background: #red;
    border: 5px solid #999;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }

  #modal_wrapper.overlay #modal_window {
    display: block;
  }

Hey!

Couple things here, if you have JS in an external .js file, you do not need the <script/> tags, these are only for when you have JS inside a HTML file.

And by the looks of it here:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="linkforms.js"></script>


</style>

You have a <style> closing tag without an opening tag, which can just be removed altogether.

Also your opening <html> tag is differently capitalised to the closing tag, they should both be lowercase :slight_smile:

Furthermore, your Javascript is loaded before the html, so getElementById won’t find anything given the html hasn’t been rendered yet

1 Like

Hi, I have made the html smaller, taken out the closing style tag, and put the script in the body section. It still does not work. Should I take the <html LANG="EN-US"> out.

<!DOCTYPE html>
<html LANG="EN-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<script type="text/javascript" src="linkforms.js"></script>

<p><button id="modal_open">Open Email Form</button></p>

<div id="modal_wrapper">
<div id="modal_window">

<div style="text-align: right;"><a id="modal_close" href="linkforms.html">close <b>X</b></a></div>

<p>Complete the form below to send an email:</p>

<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
<p><label>Your Name<strong>*</strong><br>
<input type="text" autofocus required size="48" name="name" value=""></label></p>
<p><label>Email Address<strong>*</strong><br>
<input type="email" required title="Please enter a valid email address" size="48" name="email" value=""></label></p>
<p><label>Subject<br>
<input type="text" size="48" name="subject" value=""></label></p>
<p><label>Enquiry<strong>*</strong><br>
<textarea required name="message" cols="48" rows="8"></textarea></label></p>
<p><input type="submit" name="feedbackForm" value="Send Message"></p>
</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->

</body>
</html>

Hey!

It looks like the forums have attempted to render your HTML code for you, to avoid this please format code according to this guide when sharing it. :slight_smile:

html renders from top to bottom, your javascript still reference elements which have not been rendered

either move <script> to just before the body closing tag, or in javascript wait for the DOM to be loaded

preferable, I would see a github gist of the whole project

Thanks, I have checked to see if notepad is working with a tiny alert script, and it works fine doing tiny scripts, so it must be the javascript code itself in the external page.

An alert is independent from your DOM structure. So your alert showing up is not an indicator that the issue @stetim94 pointed out is not the case here.

The problem is that these elements:

are not found if the JS code is executed before the DOM is loaded.
Add a console.log(modalWrapper, modalWindow) and see what the output is.

No, it put console.log(modalWrapper, modalWindow) underneath the js code. Does not work. Thanks, Don’t worry, the script is a huge script. Will try put a much smaller one in, maybe it will work then.

Here is a much smaller script: my pages are linkform.html, linkform.js, style.css

I am not sure where what to put in the action attribute.

<!DOCTYPE html>
<html LANG="EN-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<button class="open-button" onclick="openform()">Openform</button>

<p>Complete the form below to send an email:</p>
<div class="form-popup" id="myform">
<form action="href#"" class="form-container">

<form id="form_Button" method="POST" action="linkform.html" accept-charset="UTF-8">
<p><label>Your Name<strong>*</strong><br>
<input type="text" autofocus required size="48" name="name" value=""></label></p>
<p><label>Email Address<strong>*</strong><br>
<input type="email" required title="Please enter a valid email address" size="48" name="email" value=""></label></p>
<p><label>Subject<br>
<input type="text" size="48" name="subject" value=""></label></p>
<p><label>Enquiry<strong>*</strong><br>
<textarea required name="message" cols="48" rows="8"></textarea></label></p>
<p><input type="submit" name="feedbackForm" value="Send Message"></p>
</form>
</div>

<script type="text/javascript" src="linkforms.js"></script>

</body>
</html>

Then the js in the linkform.js file is:

function OpenForm() {
document.getElementById("myform").style.display = "block";
}
function closeForm(){
document.getElementById("myform").style.display = "none";
}

the css in style.css file is:

.form-popup
{
display: none;
position: fixed;
bottom: 0;
height: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}

Your code seems to be already interpreted by the editor because you didn’t format it. Therefore it is not readable for us.
From that we can’t see what you’ve done to tackle the loading issue.

1 Like

I will try put it in Github and put a link.

https://jsfiddle.net/s2cL4vpt/#&togetherjs=brvtmBA4Tj

The files are style.css file. linkform.js and linkform.html

//I put the html form code here.//

This sandbox does not properly load on my computer, so I cannot help you with that.

This code is full of syntax errors? I see a lot of errors