Проблемы с активизацией функции 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? это было бы всегда, если бы я просто сам использовал кнопку ввода.

Кто-нибудь, пожалуйста, скажите мне, как это неправильно, так много способов?

Я пробовал много стилей, и я действительно не хочу использовать onclick="" (см. Эту кнопку Submit, которую я так ненавижу) на моем html coz говорят, что это плохо использовать. Что мне здесь делать? Это раздражало, как вчера. Я что-то не хватает? Я заявлял это неправильно? Пушистые русалки я уже теряю драгоценные волосы для бровей в этом проекте. < = [ Или, может быть, я должен просто придерживаться вещи onclick="", когда дело доходит до показа, что редактирование btn?

Answer 1

«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>

Answer 2

Пожалуйста Проверьте погоду ваш скрипт звонит правильно или not.Check линии, где вы определяете сценарий.

Answer 3

Всего несколько минут назад ... (обратите внимание: это неловко!) Я понял это. (Это не показано в обобщенных кодах, упомянутых выше) Я сделал элемент, который изменяет его значение html как кнопку входа в систему, которая переходит в выход из системы, если вы успешно вошли в систему и изменили ее обратно, если вы щелкнете по ней в форме выхода из системы есть петля. Значение кнопки меняется, поэтому я немного экспериментировал и понял, что могу как-то связать их. Так я и сделал. Объявив onclick="" кнопке show3rdDiv и стартовому классу class="hidden" до editbtnDiv и заявив, что если кнопка входа в систему имеет значение «login», то она сохраняет скрытый класс, но если она имеет значение logout, то она удаляет этот класс. Я так глуп. :/