We Keep Coding

I am encountering some errors while doing the JavaScript implementation on my little project, Calculator. Can you help me, guys?

Here is the error message
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
This is the code
let equal = document.querySelector(".btn-equal");
equal.addEventListener("click", function (e) {
if (screen.value === "") {
screen.value = "";
} else {
let answer = eval(screen.value);
screen.value = answer;
}
});
Btw, I am a beginner on coding
I hope that I can make it work
Thank you

The error is caused by document.querySelector('.btn-equal'); not finding any elements, which means that equal is null, and so equal.addEventListener() is calling a method on an object that doesn't exist.
Most likely you are either calling document.querySelector() before the document has finished loading, or the element you want to select is not being identified properly. To debug this issue you can run console.log(document.querySelector('.some-other-element')) and see if you are able to fetch any parts of the page or not.

Object contains class giving TypeError: Cannot read property 'contains' of undefined

In my script I need to check if my newly created object inherits from a specific class.
Found out this:
Check if an element contains a class in JavaScript?
I have tried to implement like this:
class Testing {
}
let test = new Testing();
let elem = document.getElementById("result");
try {
elem.innerHTML = test.classList.contains("Testing");
} catch (e) {
elem.innerHTML = e;
}
<span id="result">...</span>
Unfortunately, it's not working. Please help me find a solution.

Your class definition is empty, so obviously your test object doesn't have any property called classList, this is why you're getting this undefined error.
Otherwise, you could simply check if test is an object of the Testing class this way :
if (test instanceof Testing) {
//do something
}

Cannot read property 'attr' of undefined

Why am I getting this error on my code?
Cannot read property 'attr' of undefined`
$(document).ready(function() {
var currentPage = jQuery.url.attr("path");
$(':input').blur(function () {
if ($(this).val().length > 0) {
pageTracker._trackEvent("Form: " + currentPage, "input_exit", $(this).attr('name'));
}
});
});
My fiddle: https://jsfiddle.net/4ocdcqrf/

If you do a console log on jQuery.url, you will see this is has a value of undefined.
you will needd to use location.pathname instead of jQuery.url.
Please take a look here for proper understanding

The issue is that jQuery.url is undefined. I'm not sure where you even got the idea that this property should exist, since it's not part of jQuery. To get the actual current page, you can simply get the native property
window.location.href

Javascript: How to check if element is visible?

i'm using the lightweight zepto.js framework and now I need to test if an element on the page is visible or not … this my case:
A button triggers the function show_guides().
function show_guides() {
$('#guides').toggle();
if ( $('#guides').is(':visible') ) { // does not work
//$.cookie('guides_visible', 'true');
console.log("visible");
} else {
console.log("invisible");
//$.cookie('guides_visible', null);
}
}
If the $('#guides') are visible I want to save a cookie and if they are not I want to get rid of it.
However zepto.js doesn't support selectors like :visible so I have to find a different way.
Any ideas how to do that? Right now I'm getting the following error:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
In the zepto documentation i've read this …
For basic support of jQuery’s non-standard pseudo-selectors such as
:visible, include the optional “selector” module.
But I have no idea how to include this.
Anybody out the who could help me out here? Thank you in advance.

You can check the display CSS property:
function show_guides() {
$('#guides').toggle();
if ( $('#guides').css('display') == 'block' ) {
console.log("visible");
} else {
console.log("invisible");
}
}

try
style.display="block";
and
style.display="hidden";

You can check visibility:visible/hidden, or display:block/none
$('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'

If all you want is to check visibility you can just use this
function visible(elem){
elem = $(elem)
return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
}
taken straight from the zepto selectors plugin. Otherwise you can just include the selectors module from https://github.com/madrobby/zepto/blob/master/src/selector.js as Felix Kling suggested

Javascript - Cannot call method 'split' of null

I have a javascript error that occurs on my site, Im pretty sure I know why, but I dont know how to fix it!
here's the error:
Uncaught TypeError: Cannot call method 'split' of null
Here's my JS code:
$(function(e) {
if (document.cookie.indexOf("login") >= 0) {
$("a#loggedInUser").html( $.cookie("login").split("|")[0] );
}
});
I'm just trying to display the username stored in the "login" cookie. Now, im pretty sure the error is because the value returned sometimes isn't a string, then it doesn't have the split method, so it causes this error.
How can I fix that? Any ideas?
Thanks!

Well you can do something like this to set a default if the value is null.
var login = $.cookie("login") || "";
$("a#loggedInUser").html(login);
Also, if you do that you might not need the document.cookie.indexOf thing.

It's probably the case that $.cookie("login") is not returning a valid string. I think the problem is that it's possible that: document.cookie.indexOf("login") >= 0 is true but $.cookie("login") is still null or undefined. It makes sense to use the same check e.g.:
$(function(e) {
var cookie = $.cookie("login");
if(cookie) {
$("a#loggedInUser").html( cookie.split("|")[0] );
}
});

Check the length of the cookie. This way you validate two things at once.
if (document.cookie.indexOf("login") >= 0 && $.cookie("login").length) {
$("a#loggedInUser").html( $.cookie("login").split("|")[0] );
}