JavaScript value in HTML with JQuery

Question

I implemented that in JavaScript:

$('#dash_adc_avg').html(adc_avg);

And this in HTML: (part A)

<div class="col-md-3 col-sm-6 col-xs-6">
    <div class="box">
        <div class="big-text"  id="dash_adc_avg"></div>
        <div class="description">
            <i class="fa fa-chevron-up"></i>
            Energy Monitor AS
        </div>
    </div>
</div>

And this in HTML: (part B, same file as part A)

<div class="col-md-4">
    <div class="row">
        <div class="col-md-12">
            <section class="widget index">
                <header>
                    <h4>
                        <i class="fa fa-bars"></i> Status word <small> </small>
                    </h4>
                </header>                                           
                <div class="body">
                    - Test: <div class="text"  id="dash_adc_avg"></div><br>

etc.

Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?

Thank you!

By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?

ID of an element must be unique... use a class instead to group similar elements like <div class="text dash_adc_avg" id="dash_adc_avg"></div> then $('.dash_adc_avg').html(adc_avg); — Arun P Johny
– Arun P Johny, Commented Dec 19, 2014 at 10:25
The second part of your question has nothing to do with the first part. If you have another question, please ask that separately. — James Donnelly
– James Donnelly, Commented Dec 19, 2014 at 10:29
Thank all of you! Perfect, was easier than expected. @James Donnelly: you're right, I should ask in another question for the JSON visualization, sorry. — Kevin
– Kevin, Commented Dec 19, 2014 at 12:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

From the id attribute section of the HTML specification:

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.

Change your "dash_adc_avg" ID into a class instead:

<!-- Part A -->
<div class="big-text dash_adc_avg"></div>

<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>

Then with your jQuery select on the class instead of the ID:

$('.dash_adc_avg').html(adc_avg);

I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.

Guffa · Accepted Answer · 2014-12-19 10:42:39Z

1

An identity has to be unique in the page.

It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:

$('[id=dash_adc_avg]').html(adc_avg);

Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.

edited Dec 19, 2014 at 10:42

answered Dec 19, 2014 at 10:31

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

James Donnelly Over a year ago

Whilst this may work, I feel advising someone to go against the HTML specification by using [id=dash_adc_avg] is a terrible idea...

Kartikeya Khosla · Accepted Answer · 2014-12-19 10:25:29Z

0

You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-

$('.dash_adc_avg').html(adc_avg);

answered Dec 19, 2014 at 10:25

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

Suchit kumar · Accepted Answer · 2014-12-19 10:28:39Z

0

you should use class when you are using same name for more than once on same page in your html:

$('.dash_adc_avg').html(adc_avg);

answered Dec 19, 2014 at 10:28

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Comments

JimboSlice · Accepted Answer · 2014-12-19 10:36:23Z

It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg

$('.dash_adc_avg').html(adc_avg)

And this in HTML: (part A)

<div class="col-md-3 col-sm-6 col-xs-6">
    <div class="box">
        <div class="big-text"  class="dash_adc_avg"></div>
        <div class="description">
            <i class="fa fa-chevron-up"></i>
            Energy Monitor AS
        </div>
    </div>
</div>

And this in HTML: (part B, same file as part A)

<div class="col-md-4">
    <div class="row">
        <div class="col-md-12">
            <section class="widget index">
                <header>
                    <h4>
                        <i class="fa fa-bars"></i> Status word <small> </small>
                    </h4>
                </header>                                           
                <div class="body">
                    - Test: <div class="text"  class="dash_adc_avg"></div><br>

Rahul Munjal · Accepted Answer · 2014-12-19 10:53:01Z

0

Your id must be unique and if not the first element found by that id will be selected.

For multiple selection for same thing/functionality use class instead of id.

answered Dec 19, 2014 at 10:53

Rahul Munjal

2,7132 gold badges17 silver badges35 bronze badges

Collectives™ on Stack Overflow

JavaScript value in HTML with JQuery

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related