Menu
I have searched on the forum and saw posts about changing text dynamically upon click. But in my case I want to change the display dynamically when loading the page from beginning. I already have a function that figure out what I should display:
function phone()
{
//code here
return phone;
}
And my question is how to display the returned phone number in the div below to replace the 1.888.888.8888 part. Can anyone offer some insights? Thank you!
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call 1.888.888.8888</span></span>
</div>
623
Use the insertAdjacentText() method to append text to a div element, e.g. container. insertAdjacentText('beforeend', 'your text here') . The method inserts a new text node at the provided position, relative to the element it was called on. Here is the HTML for the examples in this article.
text() . the string replace() method doesn't change the original string, it returns a new string. Is the text in the DOM at the time you are trying to change it? If its dynamic and hasn't loaded yet you will need to wait for the text to be present before trying to manipulate it.
Use the textContent property to change the text of a div element, e.g. div. textContent = 'Replacement text' . The textContent property will set the text of the div to the provided string, replacing any of the existing content.
There are a number of ways to dynamically manipulate HTML contents with Javascript: Directly change the contents with innerHTML and outerHTML. Create new HTML elements and insert them. Load and insert HTML contents with AJAX. Load data with AJAX, and generate a table or list. Dynamically load CSS files.
For displaying dynamic content on the view there are several approaches that can be used, some of them are: @if else or @switch case or @for or @foreach inside the view itself for doing a conditional construct, we can also call it inline code since it is written inside the view. This is for performing a simple conditional construct.
Using the Text-Align Property. In most cases, you can center text horizontally in a div using the text-align property and defining it with the value “center.”. Say you want to create a div element with a short paragraph inside and a yellow border around it. In your HTML, you’d give the div a class name like “center.”.
For displaying dynamic content on the view there are several approaches that can be used, some of them are: @if else or @switch case or @for or @foreach inside the view itself for doing a conditional construct, we can also call it inline code since it is written inside the view.
I would change the HTML to add another <span> tag around the phone number and give that span tag an id attribute in order to access it easily (broke it up on separate lines to reduce scrolling):
<div class="add-info">
<span class="rightfloat">
Order online <span class="red">
or call <span id="contact-number"></span>
</span>
</span>
</div>
Then after the page loads update the span with whatever value you want:
window.onload = function() {
document.getElementById('contact-number').innerHTML = PHONE_NUMBER_VALUE;
}
In JQuery, it would be:
$(document).ready(function () {
$('#contact-number').html(PHONE_NUMBER_VALUE);
});
You can,
<body onload="phone();">
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call
<span id="phone"></span>
</span>
</div>
</body>
And set the value when the function runs;
function phone() {
document.getElementById("phone").innerHTML = "1.888.888.8888";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
