javascript - 使用 JavaScript 的功能表单检查未出现

Question

每当单击按钮时，我都会测试弹出表单。我把它放在一个 div 标签中并使用 display: none 隐藏。当我点击我的按钮时，我试图让它出现，但没有任何显示。

HTML:

表格:

<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()">

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";
}

更新:我尝试了“getElementByClass”，仍然没有效果。

我也试过:querySelector('.form_main_bg');和 getElementsByClassName("form_main_bg");还是什么都没有

Answer 1

您的代码中有两个问题。

首先，函数不是document.getElementByClass，而是document.getElementsByClassName。

其次，document.getElementsByClassName 的结果将是一个数组，其中包含具有指定类的所有元素。因此，您必须在应用样式之前从结果中选择一个元素。 (main_bg[0].style.display)

请参阅下面的代码。

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()">