Function form check using JavaScript not appearing

Question

I am testing out a pop out form whenever a button is clicked. I have it in a div tag and hidden using display: none. I am trying to make it appear when I click on my button however nothing shows up.

HTML:

Form:

<div class="form_main_bg">
</div>
<div class="form_box">
  <div class="form_header">Pop out</div>
  <div class="form_body"></div>
  <div class="form_footer">
    <button class="btn form-control color-white mwc-orange-background-color" onclick="closeform()">Close</button>
  </div>
</div>

Button:

<input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER" onclick="formcheck()">

Javascript:

function  closeform() {
  var main_bg = document.getElementByClass("form_main_bg");
  var f_box = document.getElementByClass("form_box");
  main_bg.style.display = "none";
  f_box.style.display = "none";
}

function formcheck() {

    var main_bg = document.getElementByClass("form_main_bg");
    var f_box = document.getElementByClass("form_box");
    main_bg.style.display = "block";
    f_box.style.display = "block";

    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;

    f_box.style.left = (winWidth/2) - 400/2 + "px";
    f_box.style.top = "150px";
}

UPDATE: I tried "getElementByClass", still no effect.

I also tried: querySelector('.form_main_bg'); and getElementsByClassName("form_main_bg"); still nothing

You are trying to get element by id, but in HTML you are setting classes. — Boshentz
– Boshentz, Commented Jan 10, 2019 at 8:31
i updated my answer regarding the two issues brought up here — Button Press
– Button Press, Commented Jan 10, 2019 at 8:36
i also tried: querySelector('.form_main_bg'); and getElementsByClassName("form_main_bg"); still nothing — Button Press
– Button Press, Commented Jan 10, 2019 at 8:43

Vivek · Accepted Answer · 2019-01-10 08:43:01Z

2

There are two issues in your code.

First the function is not document.getElementByClass but document.getElementsByClassName.

Second, the result of document.getElementsByClassName will be an array with all elements that has the specified class. So you have to select an item from the result before applying styles. (main_bg[0].style.display)

See the code below.

function closeform() {
  var main_bg = document.getElementsByClassName("form_main_bg");
  var f_box = document.getElementsByClassName("form_box");
  main_bg[0].style.display = "none";
  f_box[0].style.display = "none";
}

function formcheck() {

  var main_bg = document.getElementsByClassName("form_main_bg");
  var f_box = document.getElementsByClassName("form_box");
  main_bg[0].style.display = "block";
  f_box[0].style.display = "block";

  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

  f_box[0].style.left = (winWidth / 2) - 400 / 2 + "px";
  f_box[0].style.top = "150px";
}

<div class="form_main_bg">
</div>
<div class="form_box">
  <div class="form_header">Pop out</div>
  <div class="form_body"></div>
  <div class="form_footer">
    <button class="btn form-control color-white mwc-orange-background-color" onclick="closeform()">Close</button>
  </div>
</div>

<input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER" onclick="formcheck()">

answered Jan 10, 2019 at 8:43

Vivek

2,7651 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Button Press Over a year ago

this kind of works, but the pop up only stays for a quick second then disappears again

Vivek Over a year ago

Are you sure? When I run the code snippet here, it seems to work properly.

Button Press Over a year ago

my bad, i just had to "return false;" some other code was affecting the form.

Collectives™ on Stack Overflow

Function form check using JavaScript not appearing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related