javascript - 对 DOM 事件监听器感到困惑

标签 javascript html css dom

<分区>


这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这个问题的解决方式不太可能帮助 future 的读者。

关闭 7 年前

如果这是一个简单的问题,我很抱歉,但我在使用一些 javascript 时遇到了困难。

function login() {
    var lgin = document.getElementById("logIn");
    lgin.style.display = "block";
    lgin.style.position = "fixed";
    lgin.style.width = "100%";
    lgin.style.height = "100%";
    lgin.style.paddingTop = "15px";
}

var lgButton = document.getElementById("openRooms");
lgButton.addEventListener("click", login, false);
<p><a href="#" id="openRooms">Log In</a></p>

<section id="logIn">
  <div class="form-style-6">
    <h3>Log In</h3>
    <form>
      <input type="text" name="field1" placeholder="Name" />
      <input type="email" name="field2" placeholder="Email Address" />
      <input type="password" name="field3" placeholder="Password" />
      <input type="submit" value="Submit" />
    </form>
   	  </div>
</section>

我的问题是我编写的 javascript 不起作用。

我想知道你们中是否有人可以帮助我解决这个问题。

最佳答案

CSS:

#logIn.selected {
  display:block;
  position:fixed;
  width: 100%;
  height: 100%;
  paddingTop: 15%;
}

JS:

  document.addEventListener("DOMContentLoaded", function(event) { 
     function login() {
       document.getElementById("logIn").setAttribute("class", "selected");
     }

     var lgButton = document.getElementById("openRooms");
     lgButton.addEventListener("click", login, false);
  });

关于javascript - 对 DOM 事件监听器感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34579759/

上一篇:html - 无法将 CSS 级联到输入控件,但能够在 Razor 的 DOM 中用于其他 HTML

下一篇:javascript - 在 Firefox 中将 SVG 绘制到 Canvas 时出现 InvalidStateError(适用于 Chrome)

相关文章:

PHP 简单 HTML DOM 解析器获取图像错误

javascript - Graphql 突变返回 null,但数据库已更新

javascript - Google Analytics - 跟踪用户调查问卷分数

python - django中基于角色实现访问控制

javascript - 如何从指令调用子 Controller 函数

css - Bootstrap 4 按钮向右切换菜单项...?

javascript - 数字动画师 - wordpress

javascript - 是否可以在 Slack Web API 中获得用户授予的功能?

javascript - 使用 Canvas 查找图像的主要/主色

html - z-index不起作用?