I'm trying to set some text into h1 tag on my website (WordPress Site). I've tested my code in the footer and in the header and it is the last thing to run on the webpage before it is fully loaded.
<script>
function setTitle() {
alert('ok');
var a = document.getElementsByTagName("h1");
a.innerHTML = "yourTextHere";
}
window.onload = setTitle;
</script>
Is anyone able to point out what is wrong with my code or is it something else conflicting with it in WordPress.
Thanks, Luke.
getElementsByTagName returns an HTMLCollection(an array-like object).
Use
var a = document.getElementsByTagName("h1")[0];
to get the first element of the array.
Try this:
Don't use getElementsByTagName(). Instead use getElementsByID and give some ID to your h1 tag where you want to set.
And then Set it like
var a = document.getElementsByID("h1");
a.innerHTML = "yourTextHere";
-
Thanks
Related
I'm trying to pull in the contents of one div into another. Here's my code:
<script>
(function($) {
region = ivalue_1[selectedRegion];
document.getElementById('block1').innerHTML = region;
var distributor = document.getElementById('distributor-form');
document.getElementById('block2').innerHTML = distributor;
})(jQuery);
</script>
At the moment the "block2" just displays:
[object HTMLDivElement]
I would never do it this way (I'd use jquery) but this code goes within a Wordpress plugin and the only way content will display is by doing something along the lines of document.getElementById('block1').innerHTML = region;
Where am I going wrong?
var distributor = document.getElementById('distributor-form');
should be
var distributor = document.getElementById('distributor-form').innerHTML;
The first line just returns the complete HTML element as an object. You're only interested in the value within the element
You don't add the HTML-Code but the HTML-Element.
Change your code to:
document.getElementById('block2').innerHTML = distributor.innerHTML;
You forgot do get the innerHTML from distributor:
document.getElementById('block2').innerHTML = distributor.innerHTML;
you missed innerHTML
document.getElementById('block2').innerHTML = distributor.innerHTML;
I have added an onclick function to a div here:
<script type="text/javascript">
document.getElementById("fab").onclick = function() {
location.href = 'http://your.url.here';
}
</script>
When you hover over the div, it doesnt show the URL in the bottom left of the browser like an anchor tag does (see picture): http://i.stack.imgur.com/iGLHS.png
Is there any way to make the browser show the link, when it has been added with javascript?
Add the title attribute to your element:
<div id="fab" title="http://your.url.here'></div>
Actually this is different than the popup you're seeing, but it might be as close as you can get.
As #Benten points out, you'd have to set window.status, which isn't allowed by most modern browsers.
I don't think you can directly access the property that you are looking for any more. Usually it's ignored. See this: http://www.w3schools.com/jsref/prop_win_status.asp . I'd say the other answer is your best bet.
I think something different. I hope i didnt understand it wrong. If you add -a- element as parent to your -div- it acts like what you want.
var element = document.getElementById("fab");
var aa = document.createElement("a");
aa.setAttribute('href', 'http://www.google.com');
var parent = element.parentNode;
parent.insertBefore(aa, element);
aa.appendChild(element);
please let me know if i understand it wrong?
I'm wondering how I could 'extract' the content from a set of div tags, for further use (like emailing or displaying elsewhere). The tricky part is that the content in the div's is only made after the page has loaded.
This is the div:
<div class='simpleCart_items'></div>
I have an understanding of javascript and php,
Thanks in advance!
If you use jQuery, very simply:
var content = $('.simpleCart_items').html();
This, assuming you have only 1 element with that classname. Otherwise, you could get other content
Wrap this with the ready() function in jQuery. Please refer to the documentation
You'll have to get the content once it's there, as you can't get something that doesn't exists. With that in mind, you'd get it the same way you would any other content.
var els = document.querySelectorAll('.simpleCart_items'); // nodelist
for (var i=0; i<els.length; i++) {
console.log( els[i].innerHTML )
}
I am trying to write a function for an extension that can find a link inside a specific div and click it. The link has no id or class name, so I was looking for something similar to a CSS selector but with JS without using '$' or 'jQuery' since that will require me to embed a jquery library with the extension.
The div has a class name and then a link inside, so this is the code I have so far --
function COut() {
var a = document.getElementsByClassName('bottom_row').getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
var elem = a[i],
elem.click();
}
}
This the markup for the div and link -
<div class="bottom_row">
<a onclick="miniAddToCart.closeMiniAddToCart({cmConversionEvent: 'Checkout'})" href="http://www.domain.com/shoppingcart/default.cfm?checkout=1&"><img src="http://www.domain.com/images/eb/minicart/checkout.gif" alt="Checkout"></a>
</div>
Any ideas what Im doing wrong?
getElementsByClassName('bottom_row').getElementsByTagName('a');
getElementsByClassName returns a set, not a single item
getElementsByClassName('bottom_row')[0].getElementsByTagName('a');
^^^
If there can be more than one item with the className, than you will need to loop. And if you support modern day browsers, you can look into querySelectorAll
And finally clicking on a link is not as easy as calling click()
How can I simulate a click to an anchor tag?
If you want it to do to the url, you might be better off just setting window.location.href
If there is a single A tag, I won't prefer to make loop for that. Instead you can just do it like:
function COut() {
var a = document.getElementsByClassName('bottom_row')[0].getElementsByTagName('a')[0];
if(a){
a.click();
}
}
I've been at this for a few hours now and am about to start ripping hair out. Basically what I need to do is get the first element that appears in the body and then insert another element before it.
I've tried the following to get the first element with no success (undefined or null)
window.document.body.firstChild
document.getElementsByTagName("body").firstChild
document.getElementsByTagName("body")[0].firstChild
window.document.documentElement.childNodes[1].childNodes[0]
And a whole slew of mixed and matched attempts of the previous snippets. I've also tried just getting the body then appendChild() with no success either.
Any help here is appreciated. Thanks in advance.
Yes, document.body.firstChild is correct. It's likely that you are overlooking the fact that insertBefore is a method of the parent element, and it takes the new element before the existing one. For example:
var addedElement = document.createElement('p');
addedElement.appendChild(document.createTextNode('Hello, world!'));
var body = document.body;
body.insertBefore(addedElement, body.firstChild);
You want something like this:
var first = document.body.children[0];
var beforeEle = document.createElement("div");
beforeEle.innerHTML = "I'm the first element in the body!";
document.body.insertBefore(beforeEle, first);
The most elegant solution to prepend an element to the body I could up with is a one-liner:
document.body.insertBefore(element, dom.document.body.firstChild)