How to initialize custom html class with Javascript

Question

I am looking to change the color of some text when the page loads but I cannot get any code to run with the custom class.

the html class used as so:

<div class="metricCardData">

the java script that is supposed to change color of some of the child attributes:

$('.metricCardData').on('load', function(e) {
    alert("hello")
    var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
    this.getElementsByTagName('h2')[0].className = cssClass
});

I have also tried the below but says load isnt a function

$('.metricCardData').load( function(e) {
    alert("hello")
    var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
    this.getElementsByTagName('h2')[0].className = cssClass
});

That alert doesn't get displayed. When I change out load for "click" it works on click so load must not be an event. What event do I put there or how to I initialize that custom class on load?

EDIT the Desired html looks like

<div class="metricCardData">
    <h4>Average Size</h4>
    <h2 class="bad">19807.0</h2>
    <p></p>
    <input class="severity" type="hidden" value="BAD">
</div>

I check the input class "severity" for its value in this case BAD and i have a css class that is "bad" that I apply to the h2. These metricCardData are in a thymeleaf loop

<div class="metricCardData"> has no load function. Please show an example of your HTML and explain what needs to be changed (a.k.a. show the expected HTML). — connexo
– connexo, Commented Oct 21, 2019 at 19:36
Also-- is there a requirement to do this w/ JavaScript/JQuery? Because it looks like a task better fit for simple CSS... — Alexander Nied
– Alexander Nied, Commented Oct 21, 2019 at 19:41
Please use the edit function on your question, not the comment section, to add code. — connexo
– connexo, Commented Oct 21, 2019 at 19:43

Jordan Lipana · Accepted Answer · 2019-10-22 09:11:22Z

1

You can use $(document).ready() of jquery, so that when the DOM loads in your browser then your script will be executed. For example:

<div class="metricCardData">Test Text</div>

<script>
  $(document).ready(function(){
     $('.metricCardData').css('color','red');
  });
</script>

If you want to do this using class, you can use below code

<div id='divId' class="metricCardData">Test Text</div>

<script>
  $(document).ready(function(){
     $('#divId').addClass('ChangeColorClass');
  });
</script>

edited Oct 22, 2019 at 9:11

Jordan Lipana

4472 gold badges4 silver badges18 bronze badges

answered Oct 21, 2019 at 19:43

Faseeh Haris

6791 gold badge12 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

How to initialize custom html class with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related