JavaScript 函数激活问题答案

【问题标题】：JavaScript Function Activation IssuesJavaScript 函数激活问题
【发布时间】：2017-06-27 06:03:01
【问题描述】：

自从我最近开始使用 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=""（请参阅我非常讨厌的那个提交按钮），因为人们说使用它不好。我应该在这里做什么？它已经像昨天一样烦人了。我错过了什么吗？我宣布这个错误了吗？毛茸茸的美人鱼我已经在这个项目上失去了宝贵的眉毛。 onclick="" 的东西？

【问题讨论】：

标签： javascript android html button visibility

【解决方案1】：

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

【讨论】：

我检查了十几次，但我已经想通了：/

【解决方案2】：

“id”属性是唯一的

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 = "";//error
   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 = "";//error
      alert("The user " + preuname + " was successfully loged in and editbtnLog wass set to: " + editbtnLog);
      }
      else {
        alert("Wrong Username or password!");
       }
    }

<div id="login1">
      <form id="login">
      Username<input type="text" placeholder="name">
      Passowrd<input type="password" placeholder="password">
      <input type="button" 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>

【讨论】：

我完全不明白你...：/

【解决方案3】：

就在几分钟前...（注意：这很尴尬！）我想通了。（这在上面提到的汇总代码中没有显示）我制作了一个更改其 html 值的元素，例如登录按钮，如果您成功登录，该按钮将变为注销，如果您在其注销表单中单击它，则会更改回来，因此存在循环。按钮的值发生了变化，所以我做了一些实验，并意识到我可以以某种方式将它们联系在一起。所以我做了。通过将onclick="" 声明到show3rdDiv 按钮和class="hidden" 到editbtnDiv 的起始类，并声明如果登录按钮的值为“login”，则它保留隐藏类，但如果它有一个值注销然后它会删除该类。我有时候就是这么傻。：/

【讨论】：