*I get this error on the chrome console *
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at site.js?v=kl3xhIVhcNXQPtfwvl8lWxAS82rpgIYeNY7RJb9nyrI:9:7
`let btn = document.querySelector(".btn-primary");
everytime I try to add an event listener to a button from a blazor component.
why is this not working on a blazor component , or what I am doing wrong.
--js code--
let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", (e) => {
alert("HE");
});`
I am trying to use js from an external file , trying to grab any html element from a blazor component and it is not working.
Related
I have some Javascript (below) that is resulting in a console error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener').
var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');
window.addEventListener('DOMContentLoaded', () => {
trigger.addEventListener("click", function(event) {
event.preventDefault();
audio.play();
}, false);
});
I believe this is because all my script is in a single .js file and as the page I'm viewing doesn't run this script it can't find the element it's related to.
As the above script is only run on a certain template. I thought I could wrap it in the following but that didn't seem to work and threw up it's own errors?
if (document.querySelector('.template-name') { // Existing Code }
Not sure if there's more of a 'global' way to prevent these types of error but I thought just checking the html element had a certain class seemed like a good workaround for this instance?
Automating tests against salesforce lightning using Webdriver IO. As soon as I perform a click on the home page an exception is thrown as:
**JavaScript error: Cannot read properties of undefined (reading 'default view') . I'm using WebdriverIO **
I want the click to happen without any error
DOM Structure
I'm using below code to perform a click:
let ele = ("//a[title='Relationships']/span")
await ele.click()
I'm trying to set an icon for a button in react, but it's getting me this error.
The setIcon of the Button functionality and the button is like this from the source code:
class Button {
node: HTMLButtonElement
icon: SVGElement
constructor() {
this.node = document.createElement('button');
this.node.type = 'button';
this.icon = null;
}
setIcon(icon: SVGElement) {
this.icon = icon;
this.node.appendChild(icon);
}
The button is from a librabry that written in TypeScript as mapbox control button.
The icon I am using is from MUI,
import AdjustIcon from '#mui/icons-material/Adjust'
What I did is this.back.setIcon(AdjustIcon); And this.back.setIcon(<AdjustIcon/>); Both are not working and give the same error messageļ¼
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
The issue has been fixed, <AdjustIcon/> is a react element but not a DOM node.
However .appendchild() is expecting a DOM node as parameter, and that caused the error.
The solution of this is convert <AdjustIcon/> to a DOM node, and I was using ReactDOM.render() to do that.
const container = document.createElement('icon');
ReactDOM.render(<AdjustIcon />, container);
this.back.setIcon(container);
Using document.createElement() to create a container, and call ReactDOM.render() to render the icon into that container. Then just simply use that container as the icon node.
I'm learning javascript, I tried to make a script to trigger a popup, but it doesn't work. Any ideas?
Thanks for you help.
const popupExit = document.querySelector(".popup");
addEventListener("mouseout", function () {
popupExit.querySelector(".popup").style.visibilty = "visible";
});
Using default mixitup configuration $('#id').mixitup(), I am adding a filter button dynamically by appending html code for button <li> tag. And calling the same function again instantly after adding html code to the page, in order to make the new button work. After clicking some filter buttons on the page (even if I don't press the new one) animation effects break and on the browser console I see:
Uncaught TypeError: Cannot read property 'left' of undefined error.
The error occurs on line 937:
$toshow.each(function () {
var data = this.data;
data.tX = data.finalPos.left - data.showInterPos.left; //HERE
I saw on documentation how to add new images to the list by using jquery after method, but there are no explanations about how to dynamically add filter buttons and initialize them on the fly.
Is the described behaviour expected?
That means I am doing something wrong. Then, how to initialize the new filter button correctly?
I am using Mixitup 1.5.6 (latest) with jQuery 1.10.2 (Also tried with jQuery 2.0.3).
Thanks in advance!
Your problem is that either data.finalPos or data.showInterPos is undefined. console.log data after you define it to see if you even have those keys
$toshow.each(function () {
var data = this.data;
console.log(data); //here
data.tX = data.finalPos.left - data.showInterPos.left;