In this assignment the button that says \"View in stock / out of stock\" is supp
ID: 3739524 • Letter: I
Question
In this assignment the button that says "View in stock / out of stock" is supposed to show/hide the other 3 buttons when it is pressed. As far as I can tell I've followed the directions exactly as they are laid out but it is not working. Can you find the problem with my code?
<!DOCTYPE html>
<html>
<head>
<title>Ice cream Page</title>
</head>
<body>
<h1 align="center">Ice cream store</h1>
<p align="center">Ice cream that melts your heart!</p>
<br/>
<h3 align="center">Ice cream Menu</h3>
<table align="center" border="2">
<tr>
<th>Ice-cream</th>
<th>Price</th>
</tr>
<tr>
<td>Vanilla</td>
<td>$2</td>
</tr>
<tr>
<td>Chocolate</td>
<td>$5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>$9</td>
</tr>
</table>
<br/>
<br/>
<div id=”myDIV”>
<center>
<button>Vanilla</button>
<button>Chocolate</button>
<button>Strawberry</button>
</center>
</div>
<br/>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}</script>
<center><button> View in stock / out of stock </button></center>
<br/>
<br/>
<center><img src="https://images.pexels.com/photos/749102/pexels-photo-749102.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Icecream" width="500" height="297" /> </center>
</body>
</html>
Explanation / Answer
Modified Code: The problem was quotes of myDIV
<!DOCTYPE html>
<html>
<head>
<title>Ice cream Page</title>
</head>
<body>
<h1 align="center">Ice cream store</h1>
<p align="center">Ice cream that melts your heart!</p>
<br/>
<h3 align="center">Ice cream Menu</h3>
<table align="center" border="2">
<tr>
<th>Ice-cream</th>
<th>Price</th>
</tr>
<tr>
<td>Vanilla</td>
<td>$2</td>
</tr>
<tr>
<td>Chocolate</td>
<td>$5</td>
</tr>
<tr>
<td>Strawberry</td>
<td>$9</td>
</tr>
</table>
<br/>
<br/>
<div id="myDIV">
<center>
<button>Vanilla</button>
<button>Chocolate</button>
<button>Strawberry</button>
</center>
</div>
<br/>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}</script>
<center><button> View in stock / out of stock </button></center>
<br/>
<br/>
<center><img src="https://images.pexels.com/photos/749102/pexels-photo-749102.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="Icecream" width="500" height="297" /> </center>
</body>
</html>