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.
Related
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.
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Trigger for span text/html on changed
(6 answers)
Closed last year.
I really dont know how get the div tag in between value Which in this case is
F064
I have this Hmtl code..
<div class="product--price price--unit">
<span class="price--label label--purchase-unit">articlenumber:</span>
F064
</div>
I want to say if the F064 changes then alert what its changed to.
I want something like this in either JS or JQuery
var divTagVal = $("div.product--price");
$(divTagVal).on('change', function () {
alert(divTagVal);
});
So if F064 changes to F065 the it should alert "F065"
but this doesnt work, what am i doing wrong ?
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"
}
This question already has answers here:
jQuery: this.attr() not a function?
(2 answers)
Closed 4 years ago.
I am creating a list of all of my saved AI programs relevant to their name which is done like so and works fine:
#foreach ($ais as $ai)
<a href='#' class='saved-ai'>{{ $ai }}</a> <br />
#endforeach
I then have a jQuery script which is designed to append the value of the name to an input box.
<script>
jQuery(document).ready(function(){
$('.saved-ai').click(function() {
$('#ainame').val(this.html());
});
});
</script>
I tried to debug this to see what it held and why its behaviour was strange but I get this in my console:
Languages
The error I receive is:
Uncaught TypeError: this.html is not a function
at HTMLAnchorElement.<anonymous> (home:107)
at HTMLAnchorElement.dispatch (app.js:1)
at HTMLAnchorElement.g.handle (app.js:1)
After researching, app.js in laravel already includes jQuery. However, It seems that this.html() does not exist. How can I get the value of the clicked element?
The expected output here would be Language gets placed inside the input box as the value.
You could try changing html for text, like so:
<script>
jQuery(document).ready(function(){
$('.saved-ai').click(function() {
$('#ainame').val($(this).text());
});
});
</script>
here you can find more about it: http://api.jquery.com/text/
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>