• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Need help with onclick

Mega

New Coder
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!

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:

Malcolm

Administrator
Administrator
Staff Team
Hi there,

So I got it (code is down below), what I did was declared variables to store the values of the element specified. Then added two event listeners, one for when mouse is over the text and another for when the mouse is off. Within those functions, I adjusted the font size with this line: this.style.fontSize = "40px";.

I only did one of the three words (loud, normal and quiet) so you can try it out with the other ones.

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>
                // declaring variables to store the values of Elements.
                var loud = document.getElementById("loud");
                var normal = document.getElementById("normal");
                var quiet = document.getElementById("quiet");

                // Adding an eventlistner to Element specified.
                // The event listener triggers when you hover over it, and another event is triggered when mouse goes off of element.
                loud.addEventListener("mouseover",function(){
                    this.style.fontSize = "40px"; // when event is triggered on mouse hover, text will adjust to 40px.
                })
                loud.addEventListener("mouseout",function(){
                    this.style.fontSize = "14px";
                })
            </script>
        </section>
    </body>
</html>
 
Top