Onclick call funcion не работает для одного из моих Divs

Question

У меня небольшая проблема с моей JS. У меня есть шаблон «как работает» на моем сайте, который при запуске проходит через шаги, как лучше всего использовать мой сайт.

Здесь мой код отлично работает для функций 'showHelp()' и 'next()', но не работает для функции 'close()'.

function showHelp() { 
 
    document.getElementById('howItWorksBackground').style.display = "block"; 
 
    document.getElementById('howItWorks1').style.display = "block"; 
 
} 
 
function next() { 
 
    document.getElementById('howItWorks1').style.display = "none"; 
 
    document.getElementById('howItWorks2').style.display = "block"; 
 
} 
 
function close() { 
 
    document.getElementById('howItWorksBackground').style.display = "none"; 
 
}

<button id="howItWorks" onclick='showHelp()'>How it works?</button> //This button initiates it 
 

 
<div id="howItWorksBackground" style="display: none;"> //This <div> is changed to "display: block" with the JS below 
 
    <div id="howItWorks1" style="display: none;"> 
 
    <p id="text"> Some text...</p> 
 
    <button id="next" onclick='next()'>Next</button>//upon clicking this, howItWorks2 
 
    is displayed and this block gets hidden 
 
    <div id="whiteSpace"></div> 
 
    </div> 
 
    <div id="howItWorks2" style="display: none;"> 
 
    <p id="text">Some text.....</p> 
 
    <button id="next" onclick='close()'>Close</button> \t //And when clicking here, the entire 
 
    "howItWorksBckground" should be hidden again, but my JS doesn't call it 
 

 
    <div id="whiteSpace"> 
 
     <div id="insideText"> 
 
     Some text... 
 
     <br> 
 
     Some text... 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>

Это JS действительно основной, но я не могу понять, почему он не работает ... любая помощь приветствуется!

Answer 1

Javascript уже имеет close() Функция (это зарезервированное ключевое слово) просто переименует вашу функцию, и она будет работать.

ПРИМЕЧАНИЕ: Вы также должны скрыть div howItWorks2 в функции закрытия.

Надеюсь, это поможет.

function showHelp() { 
 
    document.getElementById('howItWorksBackground').style.display = "block"; 
 
    document.getElementById('howItWorks1').style.display = "block"; 
 
} 
 
function next() { 
 
    document.getElementById('howItWorks1').style.display = "none"; 
 
    document.getElementById('howItWorks2').style.display = "block"; 
 
} 
 
function closeDiv() { 
 
    document.getElementById('howItWorksBackground').style.display = "none"; 
 
    document.getElementById('howItWorks2').style.display = "none"; 
 
}

<button id="howItWorks" onclick='showHelp()'>How it works?</button> //This button initiates it 
 

 
<div id="howItWorksBackground" style="display: none;"> //This <div> is changed to "display: block" with the JS below 
 
    <div id="howItWorks1" style="display: none;"> 
 
    <p id="text"> Some text...</p> 
 
    <button id="next" onclick='next()'>Next</button>//upon clicking this, howItWorks2 
 
    is displayed and this block gets hidden 
 
    <div id="whiteSpace"></div> 
 
    </div> 
 
    <div id="howItWorks2" style="display: none;"> 
 
    <p id="text">Some text.....</p> 
 
    <button id="next" onclick='closeDiv()'>Close</button> //And when clicking here, the entire 
 
    "howItWorksBckground" should be hidden again, but my JS doesn't call it 
 

 
    <div id="whiteSpace"> 
 
     <div id="insideText"> 
 
     Some text... 
 
     <br> 
 
     Some text... 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div>