Onclick Change Div Title

Question

I like to change Title of a div using onclick function. I a new to .js

function changeTitle() {
    document.getElementById("amul").attr('title', 'Item Added');

}

This is the input button where i have inserted my onclick function

<input type="button" class="button2" id="item1" value="Add to Cart" title="Add to Cart" onClick="addItem_check('item_listing_100','ItemTable','100','Amul Butter','500','g','150.00','1','kg','200.00','2','kg','250.00'); amul.style.backgroundColor='#c2ed5c'; if(this.value=='Add to Cart') {this.value = 'Remove from Cart'}; item1();  "/>

This is the div which i like to change the title

<div class="center_prod_box" id="amul">. . . </div>

Answer 1

You're mixing plain JavaScript (getElementById) with jQuery (attr), the two methods are incompatible. Try one of these:

// Plain JS (recommended)
document.getElementById("amul").title = "Item Added";

// Plain JS, may not work in <= IE7
document.getElementById("amul").setAttribute("title", "Item Added")

// jQuery (recommended)
$('#amul').attr('title', 'Item Added');

// You can also get the native JS object from a jQuery object
$('#amul')[0].title = "Item Added";
$('#amul')[0].setAttribute("title", "Item Added")

Answer 2

You may utilize the title property:

document.getElementById("amul").title = "Item Added";

Or, use the setAttribute() method:

document.getElementById("amul").setAttribute("title", "Item Added");