We Keep Coding

Switching between 2 images html & javscript

I write this code, when I click on that specifiek place on the image it is going to the next image. so far it is working
but i want when i click on the same place again that the previous image is displayed again.
this is not working, how do i fix this?
<img id="lights-off" src="../images/ABC2.png" style="display: none;">
<img id="lights-on" src="../images/ABC.png">
const lightsOff = document.getElementById("lights-off");
const lightsOn = document.getElementById("lights-on");
let isChanged = false;
lightsOn.addEventListener("click", function(event){
if (event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20) {
if(!isChanged){
lightsOff.style.display = "block";
lightsOn.style.display = "none";
isChanged = true;
} else {
lightsOff.style.display = "none";
lightsOn.style.display = "block";
isChanged = false;
}
}
});
I tryed to make some changes but it doenst work

You could assign a single delegated event listener to the page and inspect the event to only process images of interest. By toggling the display property based upon an images current display state you achieve the desired effect I think
let col = document.querySelectorAll('img#lights-on,img#lights-off');
document.addEventListener("click", function(e) {
if (e.target instanceof HTMLImageElement && e.offsetX >= 0 && e.offsetX <= 100 && e.offsetY >= 0 && e.offsetY <= 20) {
col.forEach(img => {
if (img && img.nodeType == 1) {
img.style.display=( img.style.display == '' || img.style.display == 'block' ) ? 'none' : 'block';
}
})
}
});
img {
width: 300px;
border: 1px solid black;
}
<img id="lights-off" src="//www.collinsdictionary.com/images/thumb/apple_158989157_250.jpg" style="display: none;">
<img id="lights-on" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Banana-Single.jpg/680px-Banana-Single.jpg">

you are listing only to lightsOn
you should listen to both of the images:
const lightsOff = document.getElementById("lights-off");
const lightsOn = document.getElementById("lights-on");
function isInBorder(event){
return event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20
}
lightsOn.addEventListener("click", function(event){
if (isInBorder(event)) {
lightsOn.style.display = "none";
lightsOff.style.display = "block";
}
});
lightsOff.addEventListener("click", function(event){
if (isInBorder(event)) {
lightsOff.style.display = "none";
lightsOn.style.display = "block";
}
});

JAVASCRIPT only the first function is working on my window.onscroll function

I am new to javascript and I am trying to make both of these functions run at different times depending on the scroll position but only the first function 'myFunction1' is running. Please help.
<script>
window.onscroll = function redblob() {myFunction()
function myFunction() {
if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 ||
document.documentElement.scrollTop > 250 && document.documentElement.scrollTop < 1200 ) {
document.getElementById("redblob").classList.add('scale-transition');
}
else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 ||
document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700 ) {
document.getElementById("blueblob").classList.add('scale-transition');
}
else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
};
</script>

You were reusing the function name myFunction(). I renamed the second one to myFunction1() (this is what you said it should be named in your question) and added a function declaration before it. This caused the errors to go away.
<script>
window.onscroll = function redblob() {
function myFunction() {
function myFunction1() {
if ((document.body.scrollTop > 250) && (document.body.scrollTop < 1200) || (document.documentElement.scrollTop > 250) && (document.documentElement.scrollTop < 1200)) {
document.getElementById("redblob").classList.add('scale-transition');
} else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700) {
document.getElementById("blueblob").classList.add('scale-transition');
} else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
}
}
</script>

Thank you for your help Daniel, as you noticed i did reuse the function name myFunction. I changed the name to function1 and added that to the first function and it worked perfectly.
window.onscroll = function functionname() { myFunction2(); myFunction1();
function myFunction1() {
if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 ||
document.documentElement.scrollTop > 250 && document.documentElement.scrollTop < 1200 ) {
document.getElementById("redblob").classList.add('scale-transition');
}
else {
document.getElementById("redblob").classList.remove('scale-transition');
}
}
function myFunction2() {
if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 ||
document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700 ) {
document.getElementById("blueblob").classList.add('scale-transition');
}
else {
document.getElementById("blueblob").classList.remove('scale-transition');
}
}
};

How to fix jQuery multiple else if statements not working

I am trying to run this function but it doesn't reach the first else if when I reach the specified screen size, it will continue to use the first if.
$(window).resize(function() {
function removeClass() {
$('#cookbook_add').removeClass('st-remove-label');
$('#email_page').removeClass('st-remove-label');
}
function addClass() {
$('#cookbook_add').addClass('st-remove-label');
$('#email_page').addClass('st-remove-label');
}
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth < 1150) {
console.log('1150');
addClass();
} else if (lastWidth < 975) {
console.log('975');
removeClass();
} else if (lastWidth < 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}
addRemoveLabel();
});
I expect the console logs to fire when the screen is that size, but it doesn't.

You should specify a range greater than and lower than for each of the if statements
$(window).resize(function() {
function removeClass() {
$('#cookbook_add').removeClass('st-remove-label');
$('#email_page').removeClass('st-remove-label');
}
function addClass() {
$('#cookbook_add').addClass('st-remove-label');
$('#email_page').addClass('st-remove-label');
}
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth < 1150 && lastWidth > 975) {
console.log('1150');
addClass();
} else if (lastWidth < 975 && lastWidth > 680) {
console.log('975');
removeClass();
} else if (lastWidth < 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}
addRemoveLabel();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
JSFiddle: https://jsfiddle.net/on0pet6g/

The problem is that the first if will be reached with any number < 1150... so 975 is < than 1150, 680 is < than 1150.
The best way is to compare the lowest values first like that:
if (lastWidth < 680) {
console.log('680');
addClass();
}
else if (lastWidth < 975) {
console.log('975');
removeClass();
}
else if (lastWidth < 1150) {
console.log('1150');
addClass();
}
else {
removeClass();
}
Just change the order.

Change the function to
function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth <= 1150 && lastWidth > 975) {
console.log('1150');
addClass();
} else if (lastWidth <= 975 &&lastWidth > 680) {
console.log('975');
removeClass();
} else if (lastWidth <= 680) {
console.log('680');
addClass();
} else {
removeClass();
}
}

Add class to html depending on screen size

When a screen size is smaller than x-amount of pixels, the HTML should get a class if it is bigger and smaller than an x-amount it should get a different class and so on.
I am using jQuery 2.2.1.
JavaScript
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
$html.removeClass('xs sm md lg');
}
$window.resize(resize).trigger('resize');
});
The problem is, that on page load, it will get the correct class, when resizing the browser the correct class will add, but it won't remove the old class.
http://jsbin.com/jusapucadi/edit?html,js,output
I am using the code from this post:
jquery, add/remove class when window width changes

Your code doesn't work as you return before removing the old class.
Change it like this, by remove the old class before setting the new.
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
$window.resize(resize).trigger('resize');
});

I think you should remove old class in start of the method and remove each class like this:
function resize() {
$html.removeClass('xs sm md lg');
if ($window.width() < 768) {
return $html.addClass('xs');
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.addClass('sm');
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.addClass('md');
}
else if ($window.width() > 1200) {
return $html.addClass('lg');
}
}
or you can set class attribute to ""
$html.attr("class","");

Use jquery .attr and it automatically removes the other classes , from Jquery
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
$(document).on('resize, ready', function() {
// Add class if screen size equals
var $window = $(window),
$html = $('html');
function resize() {
if ($window.width() < 768) {
return $html.attr( "class","xs" );
}
else if ($window.width() > 768 && $window.width() < 992) {
return $html.attr( "class", "sm" );
}
else if ($window.width() > 992 && $window.width() < 1200) {
return $html.attr( "class", "md" );
}
else if ($window.width() > 1200) {
return $html.attr( "class", "lg" );
}
}
$window.resize(resize).trigger('resize');
});
.xs body {
background:red;
}
.sm body {
background:blue;
}
.md body {
background:black;
}
.lg body {
background:purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
updated jsbin

/* cache object */
$html = $('html');
$(document).on('resize, ready', function() {
/* initially remove all existing classes */
$html.removeClass('xs sm md lg');
var width = $(window).width();
if (width < 768) {
return $html.addClass('xs');
}else if (width > 768 && width < 992) {
return $html.addClass('sm');
}else if (width > 992 && width < 1200) {
return $html.addClass('md');
}else{
return $html.addClass('lg');
}
});

Javascript Condition - Not hiding ID

I'm trying to hide the ID "hide-homepage" and it's working overall, except for my second condition where I want to hide it at the stated URL (http://wgzrv.ndxva.servertrust.com/login.asp). Am I missing something?
<script type="text/javascript">
$(window).resize(function(){
function showMyDiv() {
if (window.location.href == "http://wgzrv.ndxva.servertrust.com") && (document.documentElement.clientWidth > 992) {
document.getElementById("hide-homepage").style.display="none";
} else if (window.location.href == "http://wgzrv.ndxva.servertrust.com/login.asp") {
document.getElementById("hide-homepage").style.display="none";
} else if (document.documentElement.clientWidth < 992) {
document.getElementById("hide-homepage").style.display="none";
} else {
document.getElementById("hide-homepage").style.display="block";
}
}
});
</script>

if (window.location.href == "http://wgzrv.ndxva.servertrust.com") && (document.documentElement.clientWidth > 992) {
should be
if (window.location.href == "http://wgzrv.ndxva.servertrust.com" && document.documentElement.clientWidth > 992) {

Try instead of == using indexOf()
<script type="text/javascript">
$(window).resize(function(){
function showMyDiv() {
if (window.location.href == "http://wgzrv.ndxva.servertrust.com") && (document.documentElement.clientWidth > 992) {
document.getElementById("hide-homepage").style.display="none";
} else if (window.location.href.indexOf("http://wgzrv.ndxva.servertrust.com/login.asp") > -1) {
document.getElementById("hide-homepage").style.display="none";
} else if (document.documentElement.clientWidth < 992) {
document.getElementById("hide-homepage").style.display="none";
} else {
document.getElementById("hide-homepage").style.display="block";
}
}
});
</script>
EDIT (I removed the inner function, didn't see it the first time):
<script type="text/javascript">
$(window).resize(function(){
if (window.location.href == "http://wgzrv.ndxva.servertrust.com") && (document.documentElement.clientWidth > 992) {
document.getElementById("hide-homepage").style.display="none";
} else if (window.location.href.indexOf("http://wgzrv.ndxva.servertrust.com/login.asp") > -1) {
document.getElementById("hide-homepage").style.display="none";
} else if (document.documentElement.clientWidth < 992) {
document.getElementById("hide-homepage").style.display="none";
} else {
document.getElementById("hide-homepage").style.display="block";
}
});
</script>