What is wrong with my code? When I click the Show/Hide button nothing happens.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function hidecontent(){
document.getElementById("content").style.display = "none;";
}
</script>
<style type="text/css">
#content{
border: 1px solid #003333;
background-color: #000033;
color: #ffffff;
height: 500px;
width: 500px;
text-align: center;
display: block;
}
</style>
</head>
<body>
<form>
<input type="button" value="Hide/Show" onclick="hidecontent()" />
</form>
<?php
echo '<div id="content">Hello world!</div>';
?>
</body>
</html>
document.getElementById("content").style.display = "none;";
please remove semicolon after none.
Problem here:
document.getElementById("content").style.display = "none;";
^
------------------------------------|
Should be:
document.getElementById("content").style.display = "none";
If you actually want to show/hide the div (as button value shows), your function should look like this:
function hidecontent(){
var ds = document.getElementById("content");
if (ds.style.display === 'block'){
ds.style.display = 'none';
}
else {
ds.style.display = 'block';
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With