CODEWITHSUNDEEP
javascripthtmlonclick
Jousi
Jousi

Reputation: 476

Onclick calling funcion not working for one of my Divs

I am having a slight problem with my JS. I have a "how is works" template on my site, which when initiated, goes through steps how best to use my website.

Here is my code works fine for the 'showHelp()' and 'next()' functions, but doesnt work for the 'close()' function.

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

This JS is really basic, but I can't figure out, why it isn't working...any help appreciated!

Upvotes: 1

Views: 72

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Javascript has already a close() function (it's a reserved keyword) just rename your function and it will work.

NOTE : You should hide the div howItWorks2 also in the close function.

Hope this helps.

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>

Upvotes: 1

Related Questions