JavaScript: Triggering Multiple Events?

Question

I want to finish this project I was working on for my mom for Valentine's day.

I want to be able to click an h2 and have it trigger multiple events, for example making the background color green, changing the font size of h2 to something bigger like 50px and changing the font size of h1 to 50px

I've never triggered multiple events at the same time from an onclick event. I'd love assistance to make mom happy.

body {
  background-color: lightblue;
}

<html>

<body>
  <h1 style="color:purple; 
text-align:center;" onclick="this.style.color='yellow'; this.style.fontSize='40px'; document.body.style.backgroundColor='green';">
    Happy Valentines Day Mom!
  </h1>
  <img src="Source/me.jpg" alt="This is Me" width="300" height="300" align="middle">
  <p align="center" style="color:white;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='';">
    Lots of love and wishes on this day. It is not possible to repay the love that you have given to me. I just can love you, dear mom. Take my lots of love on this Happy Valentine's Day.
  </p>
  <img src="source/mom.jpg" alt="Mom" width="200" height="200" align="middle">
  <h1 style="color:blue; 
text-align:center;" onclick="this.innerHTML='Best Mother Ever!';">
    I love you so much! - J
  </h1>
  <br>
  <h2 id="joke" align="center" style="color:white;" onmouseover="this.style.textDecoration='line-through';" onmouseout="this.style.textDecoration='';">P.S. I love you more!</h2>
  <button type="button" onclick='document.getElementById("joke").innerHTML = "P.S.S. you are the best!"'>Click Me!</button>
</body>

</html>

Caio Alfonso · Accepted Answer · 2020-03-11 18:09:35Z

1

I think it would be best to work with style using a CSS file.

Create a CSS file and set some classes like:

h2.valentines {
    background-color: green;
    font-size: 50px;
    color: white;
}

Then on the onclick event you can pass a function to add the class to the element you want, just like this:

function addValentineClass() {
    const element = document.getElementById('joke');
    element.className = "valentines";
}

answered Mar 11, 2020 at 18:09

Caio Alfonso

1502 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jac Mills Over a year ago

I tried this by adding: onclick="addValentineClass()" to h2 Also at the bottom before </body> I added:

<script>  function addValentineClass() {      const element = document.getElementById("joke");     element.className = "valentines"; } </script>

to the bottom before </body> I also added an "styles.css" file to the folder and made sure to include styles.css in the head. Sadly, upon clicking h2 it doesn't do anything..

Jac Mills Over a year ago

I will edit my code so you can see everything I changed (besides the CSS file) - it didn't work :(

Caio Alfonso Over a year ago

You could also add the style directly on the html using the <style></style> tag. Just like this: <style> h2.valentines {background-color: green; font-size: 50px; color: white;} </style> But remember to put it before the html elements you want to display.

Collectives™ on Stack Overflow

JavaScript: Triggering Multiple Events?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related