CODEWITHSUNDEEP
javascriptjqueryhtml
xcs4me
xcs4me

Reputation: 61

How to initialize custom html class with Javascript

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

Upvotes: 1

Views: 1025

Answers (1)

Faseeh Haris
Faseeh Haris

Reputation: 679

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>

Upvotes: 1

Related Questions