Check if the element is created or not in javascript [duplicate] - javascript

This question already has answers here:
Check if a div does NOT exist with javascript
(9 answers)
Closed 4 years ago.
I have this html code,
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="shipment-filter">
<a class="dropdown-item" href="javascript:void(0)" data-table="ShipmentsDataTable" id="exportShipmentCSV_all"> CSV - All Shipments </a>
</div>
And based on that, I want to add an anchor element before #exportShipmentCSV_all.
Here's what I did.
let newElementA = document.createElement('a');
newElementA.setAttribute('id', 'classfilterBtnIsClicked');
newElementA.dataset.classfilterBtnIsClicked = true;
let currentDiv = document.getElementById('shipment-filter');
currentDiv.insertBefore(newElementA, currentDiv.childNodes[0]);
After doing that,
If the #exportShipmentCSV_all has been clicked, I'd like to check if the element exists using this way
if (document.getElementById('classfilterBtnIsClicked').length) {
// Code here
}
which is based on this reference.
Is there an "exists" function for jQuery?
But doing so, I got this error in chrome dev tool console.tab
Uncaught TypeError: Cannot read property 'length' of null
Within this code, there are also jquery in it,
Can you suggest the way I should check, if element has been created or not?

Document.getElementById() - Return value
An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.
The returned element object does not have length property, thus you get undefined.
Why use length? You do not need to use length property here, checking the element object itself is enough:
let newElementA = document.createElement('a');
newElementA.setAttribute('id', 'classfilterBtnIsClicked');
newElementA.dataset.classfilterBtnIsClicked = true;
let currentDiv = document.getElementById('shipment-filter');
currentDiv.insertBefore(newElementA, currentDiv.childNodes[0]);
if (document.getElementById('classfilterBtnIsClicked')) {
console.log('Element exists');
}
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="shipment-filter">
<a class="dropdown-item" href="javascript:void(0)" data-table="ShipmentsDataTable" id="exportShipmentCSV_all"> CSV - All Shipments </a>
</div>

Related

How to appendChild paragraph to another html page [duplicate]

This question already has answers here:
How to get a dom element in a new window?
(3 answers)
access a dom element of a different page in Javascript
(1 answer)
Closed 6 months ago.
I want to appendChild an element to another page after clicking a button.
I used document.getElementById() to select the element I want to appendChild to.
But it throws this error in the console - Cannot read properties of null (reading 'appendChild').
It works when I appendChild paragraph to the same page in which I click the button.
For both html documents I load the script at the bottom.
class Pojistovna {
constructor(){
this.tableOfInsured = document.getElementById("table-of-insured-container")
this.createInsured()
}
createInsured() {
this.continueButton.addEventListener("click", () => {
let paragraph = document.createElement("p")
paragraph.textContent = "Hi"
this.tableOfInsured.appendChild(paragraph)
}
}
}
Move this.tableOfInsured = document.getElementById("table-of-insured-container") to the top of createInsured fun.

How to make and edit an Html div in javascript [duplicate]

This question already has answers here:
Dynamically creating HTML elements using Javascript?
(6 answers)
Closed 2 years ago.
Trying to make an Html div inside a div that is already made using javascript but my function has a problem.
Html part
<div id="test">
<button onclick="addDiv()">test</button>
</div>
Js part
let page = document.querySelector('test');
function addDiv() {
document.createElement('div')
document.querySelector('page')
addedDiv = document.appendChild('div')
page = document.appendChild('div')
document.getElementById('div').innerHTML = "ThisFunctionIsWorking"
}
the output should be seen in the console with a text inside the div that says ThisFunctionIsWorking
but instead I get an error(Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.)
I would appreciate your time helping me...
Your code is incorrect in many ways. I suggest you study basic (web) programming with the emphasis on fundamentals like return values, scope, etc. and then basic javascript and dom tree manipulation.
A solution to your problem is:
<div id="test">
<button onclick="addDiv('test')">test</button>
</div>
function addDiv(nodeId) {
var elem = document.createElement('div')
var container = document.getElementById(nodeId)
container.appendChild(elem)
elem.innerHTML = "ThisFunctionIsWorking"
}

Cannot read property 'className' [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I'm working on WordPress and Javascript, I want to add a class when you click on the button to show and hide the menu.
This is the html:
<span class="menurwd" id="menurwd"></span>
<ul id="menu-principal" class="menu">
<li>Item</li>
<li>Item</li>
</ul>
the script:
(function() {
var x = document.getElementById("menu-principal");
document.getElementById("menurwd").onclick = function activeRwd(){
if(x.className === "menu"){
x.className += " active";
}else{
x.className = "menu";
}
}
})();
In the local installation if it works, but at the time of publishing it generates this error
The error most likely actually says: "Cannot read property className of null". Which means that x is not pointing to anything. Make sure your JavaScript is moved to just before the body element is closed (</body>) so that by the time the parser encounters the script, the HTML will already have been parsed.

generate href for a link based on id using javascript

I'm trying to use JavaScript to create an ID for my links and also to tell it where to link to.
My JavaScript has generated a link element in my HTML:
<a id = "NB4-CAXL-14U-12-AAG"> Link Text </a>
And that appears as it should.
I then have a variable eopartnum[i]:
console.log(eopartnum[i]); //output: NB4-CAXL-14U-12-AAG
This variable matches my ID for my link above. Then i tried to access that link via the ID and assign an href to it, like so:
var linktoprod = document.getElementById(eopartnum[i]);
console.log(linktoprod); //returns null
linktoprod.href = "http://www.enviroptics.com/"; //Cannot set property 'href' of null(…)
Why does my linktoprod come up as null? Is my syntax wrong?
JSfiddle for full code: http://jsfiddle.net/98oL12tk/17/ Lines 106-109 in JS section.
The problem is that you are calling getElementById() before you append the table to the document. At the time that you are querying for the ID, it doesn't yet exist. This example seems a bit contrived; I think you could just set firstcelllink.href = 'http://www.enviroptics.com/';
EDIT: probably more appropriate to use firstcelllink.setAttribute('href', 'http://www.enviroptics.com/');

How to extract query parameter in href attribute? [duplicate]

This question already has answers here:
How can I get query string values in JavaScript?
(73 answers)
Closed 8 years ago.
<a class="test" href="www.abc.com?test1=1|6&test2=2">img</a>
<a class="test" href="www.abc.com?test2=1&test3=2">img</a>
<a class="test" href="www.abc.com?test3=1&test4=2">img</a>
I have a set of anchor elements with same class name, I need to extract a particular parameter, like test1 or test4, this value can be dynamic and update the href param with a new value
how do i do it in jquery?
any ideas?
function getUrlParameter(sParam)
{
$('.test').each( function() {
var href= $(this).attr('href');
//if href contain sParam ....... you should know that :)
);
});
}​
String test1Param = getUrlParameter("test1");
Hope this help :)

Categories