This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
document.getElementById("someId") Vs. someId
(5 answers)
Closed 4 years ago.
I have a snippet of code here
<div id="pTagId" >some content</div>
<button onclick="console.log(document.getElementById('pTagId').innerHTML);">button1</button>
<button onclick="console.log(pTagId.innerHTML);">button2</button>
In the first button I'm using document.getElementById to get the tag object.
In the second button I'm directly using pTagId without document.getElementById and it also works.
is it reliable to use pTagId directly without document.getElementById? If yes what is the need of document.getElementById?
getElementById() is the right way to do it.
There are some browsers that make a global variable by the same name as the element id so that may be why it was somehow working, but you should not rely on that.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 days ago.
I'm trying to get an element which is added by an external application. The only way I can get this specific element is by the data-i18n-key attribute which I thought I can grab like any data attribute so something like this.
The code:
const buttons = document.querySelectorAll('[data-i18n-key="sdk.seamless_product_reward.paid_items_required"]');
console.log(buttons.length);
<span class="lion-reward-item__redeem-button-text lion-loyalty-page-reward-item__redeem-button-text" data-i18n-key="sdk.seamless_product_reward.paid_items_required">Paid items required</span>
However, this doesn't return anything. Any ideas how to do this?
Of course, Barmer is absolutely right. Your code works. The problem will be that your JS is initialised before the DOM has finished loading. Pack your JS above the closing body tag.
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
I'm trying to learn innerHTML commands, but it's just showing me "Author: " text.
HTML side
<h1 id="author">Author: </h1>
<p>Sabir Türkleri'nin ve Batı Göktürk boylarının devamı olan Hazarlar, Göktürk birliği döneminde Göktürklerin Batı kanadını oluşturmaktaydı.</p>
</body>
JS side
var content= "Ensar Ergok";
document.getElementById("author").value=content;
You need to use innerText, textContent or innerHTML instead of value.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Why don't we just use element IDs as identifiers in JavaScript?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Automatically created variables from ids in JS? [duplicate]
(6 answers)
Why is document.getElementById not needed? [duplicate]
(1 answer)
Closed 2 years ago.
I just noticed, its not necessary anymore in Chrome to select elements that have an id e.g with getElementById, you can directly call that element with its id name... e.g "para1" in this example:
<head>
<title>getElementById Beispiel</title>
<script>
function changeColor(newColor) {
para1.style.color = newColor;
}
</script>
</head>
<body>
<p id="para1">Irgendein Text</p>
<button onclick="changeColor('blue');">Blau</button>
<button onclick="changeColor('red');">Rot</button>
</body>
is there any more specification on this? didn't find anything about it on the internet..
This question already has answers here:
.getElementByClassName not working? [duplicate]
(2 answers)
Closed 7 years ago.
Im trying to make all my div class elements to lose all its content by replacing their current content with nothing "".
document.getElementsByClassName("sprint_column").innerHTML = "";
But nothing happens with the "sprint_column" when im trying to reach the class, However if i try to reach the IDs it works:
document.getElementsById("div3_Score").innerHTML = "";
Here is the code where the Ids and Classes is created:
<div class='sprint_column' id='div3_".$team."'>Sprint 1</div>
Is there any way to clear all content from a class with "getElementsByClassName" or do i have to loop through all ID elements and clear them one by one?
getElementsByClassName returns an array of DOM elements. You need to iterate through them, e.g. via a for loop, and change the innerHTML one by one.
This question already has answers here:
chaining getElementById
(6 answers)
Closed 9 years ago.
If you use getElementById to with document like - document.getElementById then it always works.
But however, if we perform the same on an element say x like x.getElementById, then it returns an error.
The unusual thing about this is that getElementsByClassName and getElementsByTagName work on the elements however getElementById doesn't!
Container IDs should be unique, so there's no reason to find an object by ID within another container. This is why you only need document.getElementById to access any element by its ID, whereas when you are searching by class or tag name, you might want to only search within a specific container, which is why you can do x.getElementsByClassName etc.