JavaScript 函数激活问题

Question

自从我最近开始使用 js 以来，我还有另一个问题一直困扰着我，这样我的应用程序就能很好地响应，但我在这里遇到了另一个障碍。

正如标题所示，我遇到了特定代码的严重问题。这是其总结形式

window.onload = onLoadFunctions;

function onLoadFunctions(){
  var show3rdDiv = document.getElementById('show3rdDiv');
  var editbtnStart = document.getElementById('editbtnDiv');
  var editbtnLog = 0;
  
  editbtnStart.style.display = 'none';
  
  show3rdDiv.onclick = function(){
   document.getElementById('3rdDiv')className = "";
   if (editbtnLog == 1) {
  editbtnStart.style.display = 'block';
  }
  else {
  editbtnStart.style.display = 'none';
  }
  }
  }

function submitclick(){
  var uname = document.getElementById("login").elements[0].value;
  var upass = document.getElementById("login").elements[1].value;
  var preuname = "john";
  var preupass = "doe";
if (preuname == uname && preupass == upass) {
  editbtnLog = 1;
  document.getElementById('2ndDiv')className = "";
  alert("The user " + preuname + " was successfully loged in and editbtnLog wass set to: " + editbtnLog);
  }
  else {
    alert("Wrong Username or password!");
   }
}

.hidden {
  display:none;
  }

<div id="login">
  <form id="login">
  Username<input type"text" placeholder="name">
  Passowrd<input type"password" placeholder="password">
  <input type="submit" value="Submit" onclick="submitclick()">
  </form>
</div>
<div id="2ndDiv" class="hidden">
  <input type="button" id="show3rdDiv" value="Continue">
</div>
<div id="3rdDiv" class="hidden">
<div id="editbtnDiv">
        <input type="button" id="editbtn" value="Edit"/>
</div>
</div>

无论我做什么， editbtn都不会像需要某些东西的对象那样出现或消失。如果你注意到我用了它的 div 来代替？这是因为如果我只使用输入按钮本身，它根本不会出现。

有人请告诉我这是怎么错的？

我尝试了很多样式，但我真的不想在我的 html 上使用 onclick="" (请参阅我非常讨厌的提交按钮)，因为人们说它很糟糕使用它。我应该在这里做什么？就像昨天一样，已经很烦人了。我错过了什么吗？我声明这是错误的吗？毛茸茸的美人鱼在这个项目中我已经失去了珍贵的眉毛。 <=[或者也许我应该在显示编辑 btn 时坚持 onclick="" 事情？

Answer 1

请检查您的脚本是否正确调用。检查您定义脚本的行。