I'm trying to make text <p id="text> larger when clicking on <a href id="LOUD">, and smaller when clicking on <a href id="QUIET"> links. The javascript code will work for a second, and then the <p> returns promptly to normal size. The goal is to eventually use jQuery but I am so stuck on javaScript haven't even gotten that far. Did I even list my jQuery library correctly?
Ugh! Any suggestions greatly appreciated....THANKS!
Ugh! Any suggestions greatly appreciated....THANKS!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Events & Effects</title>
<link rel="stylesheet" href="styles.css">
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<section id="one">
<p class="desc">1. Create an event for each of the links below that changes the font size of the text below. When you click on loud the text should be larger, click on normal to return it to the default size and quiet to make it small.</p>
<a href id="loud">Loud</a>
<a href id="normal">Normal</a>
<a href id="quiet">Quiet</a>
<p id="text">This is my text that will grow, shrink and return to normal. Just like Alice.</p>
<script>
<!-- This is my trial of jQuery which isn't correct -->
$("loud").click(function(.style.fontSize = "50px"){
})
<!-- This is my code for JavaScript which is so close! -->
<script>
document.getElementById("loud").addEventListener("onclick", myFunction);
function myFunction1() {
document.getElementById("text").style.fontSize = "50px";
}
</script>
<script>
document.getElementById("normal").addEventListener("onclick", myFunction);
function myFunction3() {
document.getElementById("text").style.fontSize = "12px";
}
</script>
<script>
document.getElementById("quiet").addEventListener("onclick", myFunction);
function myFunction3() {
document.getElementById("text").style.fontSize = "5px";
}
</script>
</section>
</body>
</html>
Last edited by a moderator:
