CODEWITHSUNDEEP
javascriptcss
user1765369
user1765369

Reputation: 1405

Simple toggle div visibility with Javascript not working

This is very frustrating as it seems so simple yet is not working.

In my body I have 

<div id ="splashscreen" style="display:block">
    <h3>title</h3>
    <p>text</p>
    <inputtype="button" value="Start" onClick="splash();" />
</div>`

And in my head, within script tags I have 

function splash() {
    var divSplash = document.getElementById("splashscreen");
    divSplash.style.display = "none";
}

Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?

Upvotes: 2

Views: 1609

Answers (4)

Marcus Vinicius
Marcus Vinicius

Reputation: 1908

The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.

I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.

<script type="text/javascript"> 
    function startGame() { 
        var divSplash = document.getElementById("splash"); 
        divSplash.style.display = "none"; 
    } 
</script>

Also, the language property is now obsolete.

Upvotes: 2

Jon Harding
Jon Harding

Reputation: 4946

Here is the answer in a jsfiddle

HTML:

<div id ="splashscreen" style="display:block">
    <h3>title</h3>
    <p>text</p>
    <button onclick="splash()">Start</button>
</div>

Javascript: 

function splash() {
    var divSplash = document.getElementById('splashscreen');
    divSplash.style.display = "none";
}

Upvotes: 0

Alex Pereira
Alex Pereira

Reputation: 966

You're not using the same id :)

spashscreen != splashscreen

Upvotes: 0

anthony_mcdougle
anthony_mcdougle

Reputation: 306

Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').

When I fix the typo, it works.

Upvotes: 1

Related Questions