How can I change <p> tag data dynamically after some defined time delay using javascript?
Solution 1
Write your <p>
as:
<p class="messages">messages</p>
Your javascript:
function updateMessages() {
var ps = document.getElementsByClassName("messages");
for(var i = 0, len = ps.length; i < len; i++) {
ps[i].innerHTML = "messages (" + messageCount + ")";
}
}
setTimeout(updateMessages, 1000);
Where 1000
is the number of milliseconds to delay.
Or if you want to do it periodically every 15 seconds, you can use setInterval
:
setInterval(updateMessages, 15000);
UPDATE:
I see your comment above:
new messages are retrieved from the database using a JSP function that checks database for new messages
In that case, I gather you want to retrieve that periodically, in effect polling that URL? If you already use a javascript framework, I suggest you look at their AJAX
documentation.
Solution 2
$(document).ready({
function updatePara() {
$('p').html('Content to set in para');
}
});
setTimeout(updatePara, no.of milisecond to delay);
jQuery make dom manipulation much easy :)
The above code changes content of all the paragraph, So better to give the desired paragragh <p></p>
some call name then filter the para to update with those name i.e $('p.classname').html('your content')
OR $('.classname').html('Your content')
jQuery is AWESOME !!! :)
Solution 3
You can use setTimeout function:
var delay = 1000; // 1 second
setTimeout(function() {
var pNodes = document.getElementsByTagName('p');
for (var i=0, length=pNodes.length; i < length; i++) {
pNodes[i].innerHTML = pNodes[i].innerHTML+"("+ (i+1) +")";
}
}, delay);
getElementsByTagName
is used just for example. The way of retrieving pNodes depends on structure of your html code.
Aishwarya Shiva
With over 10 years of experience providing thorough and skillful advice in software development, digital marketing, PC troubleshooting and other tech related issues to both individuals and businesses. Use this VIP link and give me a call for free .NET, C#, ASP.NET, MVC, JAVA, PHP, WCF, WPF etc. consultation: https://clarity.fm/aishwaryashiva/early638
Updated on February 19, 2020Comments
-
Aishwarya Shiva over 4 years
I want to change only
<p>
tag contents using javascript after a defined time delay. For example a<p>messages</p>
should change depending on the no. of new messages came. As
<p>messages(1)</p> <p>messages(2)</p>
-
Chris Morgan over 12 years
document.getElementsByClassName
returns aNodeList
which doesn't have atext()
method. Perhaps you meant to iterate over theNodeList
or take the first item in it and assign totextContent
? -
Aishwarya Shiva over 12 yearsThanks a lot Linus and Chris but I want to call a JSP function that returns the no. of messages. How can I do that? I mean calling a JSP function using javascript??
-
Aishwarya Shiva over 12 yearsThanks Molecule Man and can you tell me how can I call a JSP function that returns an INT value of no. of messages using javascript code???
-
Molecular Man over 12 years@AishwaryaShivaPareek, sorry, I can't (not an expert on JSP).
-
Linus Thiel over 12 yearsThanks Chris, I realized that after I had (incorrectly) rewritten my previous jQuery version. I have updated it accordingly.