The button needs to be edited in css to appear the way I have, that part worked. Then it needs to show a message that says “welcome to the world of coding!” upon clicking the button. I feel like it’s something very little but I’ve reread through this like 20x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting Page</title>
<style>
h1 {
font-size: 14pt;
text-align: center;
}
body {
background-color: #eec0c8;
font-family: Georgia;
}
button {
background-color: rgb(245, 66, 132);
padding: 33px;
}
button:hover {
background-color: #ffffff;
}
</style>
</head>
<body>
<h1> Welcome to my page! </h1>
<p>This is a simple webpage created as a learning exercise.</p>
<p>
<button onclick="hideUnhide(paragraph1)">Click to see a message!</button>
</p>
<p id="paragraph1">Welcome to the world of coding!</p>
<script>
function hideUnhide(id){
const p1 = document.getElementById(id);
if (p1.style.display == "none"){
p1.style.display = "block";
}
else {
p1.style.display = "none";
}
}
</script>
</body>
</html>
I am new to programming and I’m in a class. I have tried doing it 5 different ways and every time it will not allow the click function to show the message. I tried it in notepad++ and also in vs code. What am I doing wrong here? This is my last attempt I should’ve saved every version so I could ask about each one, but this one I followed the button directions verbatim from a YouTube video of someone doing the same thing in vs code and it did not work but they have it on video working.