Changing content of class using Javascript

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');
    })   
})

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];

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

Tags:

Javascript

Html

Onclick

Tags

Recent Posts