私のDivsのOnclick呼び出し関数が動作しません

Question

私のJSには少し問題があります。私は自分のサイトに「どのように働いていますか」というテンプレートを持っています。このテンプレートは、開始されると、自分のウェブサイトをどのように使うのが最適なのかを判断します。

私のコードは'showHelp()'と'next()'の機能では問題なく動作しますが、'close()'の機能では機能しません。それが動作していない理由は、JS

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>

は本当に基本的なものですが、私は把握することはできません、...すべてのヘルプは大歓迎します！

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>