Changing content of class using Javascript

Question

I started reading JavaScript in W3schools and testing out/changing few things in the examples they give so I can see what is doing what but didn't manage to identify the syntax, yet.

Below is the original code to change p tag content, the link to it.

<p id="demo">
    JavaScript can change the content of an HTML element.
</p>

<script>
function myFunction()
{
    x = document.getElementById("demo");  // Find the element
    x.innerHTML = "Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

I want to know how to change contents with the same class, but failed as you can see that the example below doesn't work. Fiddle of code below.

<p class="demo">
    JavaScript can change the content of an HTML element.
</p>

<p class="demo">Yolo</p>

<script>
function myFunction()
{
    x = document.getElementsByClassName("demo");  // Find the element
    x.innerHTML = "Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

If you could show me how ^^" and help me understand, is "getElementById" a variable that could be anything else or is it a command?

melvas · Accepted Answer · 2015-08-20 04:48:01Z

25

Your x - is array of elements. try to use loop:

<body>

<p class="demo">JavaScript can change the content of an HTML element.</p>    
<p class="demo">Yolo</p>   

<button type="button" onclick="myFunction()">Click Me!</button>

<script>        
function myFunction()
{
x=document.getElementsByClassName("demo");  // Find the elements
    for(var i = 0; i < x.length; i++){
    x[i].innerText="Hello JavaScript!";    // Change the content
    }

}

</script>
</body>

See FIDDLE

edited Aug 20, 2015 at 4:48

answered Feb 16, 2014 at 15:33

melvas

2,36626 silver badges29 bronze badges

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

5 Comments

Harlequin Over a year ago

In the fiddle you have an extra line "console.log(x)" D:: what is it?

melvas Over a year ago

See this link to find answer for this: developers.google.com/chrome-developer-tools/docs/console-api

melvas Over a year ago

it just displays a message in the console.

melvas Over a year ago

I use it just to make sure that everything I do is right

Harlequin Over a year ago

Oh ok, I thought it was strage since it worked normally without it. Thanks!

Anonymous · Accepted Answer · 2014-02-16 15:33:44Z

4

Notice how when you use:

x=document.getElementsByClassName("demo");

It is Elements instead of Element. This is because it returns ~~an array~~ a HTMLCollection of all the elements with one particular class name. In order to combat this, you can choose the first element ~~in the array~~:

x=document.getElementsByClassName("demo")[0];

edited Feb 16, 2014 at 15:33

answered Feb 16, 2014 at 15:26

Anonymous

12.1k7 gold badges37 silver badges58 bronze badges

3 Comments

Harlequin Over a year ago

I read your answer like 4 times then I understood the array thingy! (I had an idea of array from Pascal). Tested it and worked, [0] changed the first text, [1] changed the 2nd. Thanks! Tho the loop thingy was what I intended

prakash kumar Over a year ago

var x=document.getElementsByClassName("demo")[0].innerHTML; but i want to access this using jquery then how can i get variable x

Atul Baldaniya Over a year ago

You will get variable x using jQuery like this x = $('.demo');

Milos Sretin · Accepted Answer · 2014-02-16 15:40:52Z

3

It is easier to use jQuery with Javascript

See this example: http://jsfiddle.net/37jq9/3/

If you use jquery instead of calling

x=document.getElementsByClassName("demo");

you can use

x = $('.demo');

but you can just call the function like this:

$(document).ready(function(){
    $('button').click(function(){
        $('.demo').text('Hello Javascript');
    })   
})

edited Feb 16, 2014 at 15:40

answered Feb 16, 2014 at 15:33

Milos Sretin

1,7582 gold badges25 silver badges47 bronze badges

2 Comments

melvas Over a year ago

"I started reading JavaScript in W3schools" - Harlequin should learn javascript at first.

David Thomas Over a year ago

"Easier to use jQuery with Java"? — what? Java != JavaScript, and ideally JavaScript should be learned before developing a reliance any library.

Collectives™ on Stack Overflow

Changing content of class using Javascript

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related