This code makes it so when the user clicks one of the colors (color1-4) it sets the CSS display property of all the shoes none except for the color that was clicked, whose display is set to block. The code looks dirty and an employer would not approve.
How would I go about making that a for loop, or otherwise make the code cleaner?
color2.addEventListener('click', () => {
shoe.style.display = "none";
shoe3.style.display = "none";
shoe5.style.display = "none";
shoe2.style.display = "block";
console.log('u removed it and added another');
});
color3.addEventListener('click', () => {
shoe.style.display = "none";
shoe3.style.display = "none";
shoe5.style.display = "none";
shoe2.style.display = "none";
shoe3.style.display = "block";
console.log('u removed it and added another');
});
color4.addEventListener('click', () => {
shoe.style.display = "none";
shoe3.style.display = "none";
shoe5.style.display = "none";
shoe3.style.display = "none";
shoe5.style.display = "block";
console.log('u removed it and added another');
});
color1.addEventListener('click', () => {
shoe.style.display = "block";
shoe2.style.display = "none";
shoe3.style.display = "none";
shoe4.style.display = "none";
shoe5.style.display = "none";
console.log('u removed it and added another');
});
color2.addEventListener('click', () => {
shoe.style.display = "none";
shoe3.style.display = "none";
shoe5.style.display = "none";
shoe2.style.display = "block";
console.log('u removed it and added another');
});
You need to make use of Array and a custom function to manipulate DOM elements, here is an basic example:
var shoes = [s1,s2,s3]; //DOM element arrays
colorShoe = (shoe) =>{
for(let i=0; i<shoes.length;i++){
if(shoes[i] === shoe){
//Handling style
}
}
Please check this and see if you can modify your code like the below:
const colorList = [color1, color2, color3]; // you can add more
const shoeList = [shoe1, shoe2, shoe3]; // you can add more
[color1, color2, color3].forEach((color, colorIndex) => {
color.addEventListener('click', () => {
shoeList.forEach((shoe, shoeIndex) => {
if (colorIndex === shoeIndex) {
shoe.style.display = "block";
} else {
shoe.style.display = "none";
}
});
});
});
You can do like this if you dun wan to use array . Just use window['var name'+the index number] then you can add the thing you wan to do on the back :D thank you : D
color3.addEventListener('click', () => {
for (var i = 1; i <= 5; i++) {
if (i == 3) shoe.style.display = "block";
else {
window['shoe'+i].style.display = "none";
}
}
console.log('u removed it and added another');
});
color4.addEventListener('click', () => {
for (var i = 1; i <= 5; i++) {
if (i == 4) shoe.style.display = "block";
else {
window['shoe'+i].style.display = "none";
}
}
console.log('u removed it and added another');
});
color1.addEventListener('click', () => {
for (var i = 1; i <= 5; i++) {
if (i == 1) shoe.style.display = "block";
else {
window['shoe'+i].style.display = "none";
}
}
console.log('u removed it and added another');
});
Related
So I wanted to to make a banner container that flicks through multiple banners (3atm), I'm sure most users will be able to understand through the simple code alone. This isn't the final at all but I at least need a working starting point. the error is "Uncaught TypeError: bButtonR.addEventListener is not a function at index.html"
const bannerItem1 = document.querySelectorAll("#bItem1");
const bannerItem2 = document.querySelectorAll("#bItem2");
const bannerItem3 = document.querySelectorAll("#bItem3");
const bButtonL = document.querySelectorAll(".left-arrow");
const bButtonR = document.querySelectorAll(".right-arrow");
let iCounter = 1;
bButtonR.addEventListener("click", ()=> {
iCounter++;
updateBanner();
});
function updateBanner() {
if (iCounter > 3) {
iCounter = 3;
} else if(iCounter === 1) {
bannerItem2.style.display = "none";
bannerItem3.style.display = "none";
bannerItem1.style.display = "flex";
} else if (iCounter === 2) {
bannerItem1.style.display = "none";
bannerItem3.style.display = "none";
bannerItem2.style.display = "flex";
}
else if (iCounter === 3) {
bannerItem1.style.display = "none";
bannerItem2.style.display = "none";
bannerItem3.style.display = "flex";
}
};
Document.querySelectorAll() return a list.
If want to select only one element you should use Document.querySelector() or, even better, Document.getElementById().
getElementById is much faster than querySelector and if you do not have any specific reason to use querySelector and you know you will use and id and not a dynamic css selector you should use it.
Try this:
const bannerItem1 = document.getElementById("bItem1");
const bannerItem2 = document.getElementById("bItem2");
const bannerItem3 = document.getElementById("bItem3");
const bButtonL = document.querySelector(".left-arrow");
const bButtonR = document.querySelector(".right-arrow");
let iCounter = 1;
bButtonR.addEventListener("click", ()=> {
iCounter++;
updateBanner();
});
function updateBanner() {
if (iCounter > 3) {
iCounter = 3;
} else if(iCounter === 1) {
bannerItem2.style.display = "none";
bannerItem3.style.display = "none";
bannerItem1.style.display = "flex";
} else if (iCounter === 2) {
bannerItem1.style.display = "none";
bannerItem3.style.display = "none";
bannerItem2.style.display = "flex";
}
else if (iCounter === 3) {
bannerItem1.style.display = "none";
bannerItem2.style.display = "none";
bannerItem3.style.display = "flex";
}
};
const bButtonL = document.querySelectorAll(".left-arrow");
if the class "left-arrow" is a single class then you must have to use
bButtonR[0].addEventListener("click", ()=> {
iCounter++;
updateBanner();
});
because queryselectorall will put your class in an array . and to access that you should use indexing .
and if one class with same name is there you should use getelementsbyclassname or queryselector not queryselectorall .
const bButtonL = document.querySelector(".left-arrow");
bButtonR.addEventListener("click", ()=> {
iCounter++;
updateBanner();
});
I'm sure there is a way to write a shorter version of the following js code. In the end I'm just repeating myself over and over again. Any suggestions?
Thanks a lot!
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 1) {
design01yellow.style.display = "none";
design01black.style.display = "block";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 2) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "block";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if
///AND SO ON
Give all the elements a common class (e.g. class="design"). Loop over them, setting them all to none, then set the specific element to block.
document.querySelectorAll(".design").forEach(el => el.style.display = "none");
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
} else if (designVal == 0 && colorVal == 1) {
design01black.style.display = "block";
} ...
I'd normalize them to 'display: none' and then only set the one you want to display: block.
if (designVal === 0) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
if(colorVal === 0) {
design01yellow.style.display = "block";
} else if (colorVal === 1) {
design01black.style.display = "block";
} else if (colorVal === 2) {
design01blue.style.display = "block";
}
// and so on
}
I can get the navigation menu to appear when I click on the button, but I can't make it disappear.
Here's the code:
const navButton = document.getElementById("nav-btn");
const menu = document.getElementById("nav-menu");
const all = document.getElementsByTagName("body");
const menuActive = () => {
if (menu.style.display = "none") {
menu.style.display = "block";
}
}
const menuDeactive = () => {
if (menu.style.display = "block") {
menu.style.display = "none";
}
}
navButton.addEventListener("click", menuActive);
all.addEventListener("click", menuDeactive);
Use == to compare.
Also, document.getElementsByTagName("body") is redundant. There can only be one body tag.
const navButton = document.getElementById("nav-btn");
const menu = document.getElementById("nav-menu");
const all = document.getElementsByTagName("body");
const menuActive = () => {
if (menu.style.display == "none") {
menu.style.display = "block";
}
}
const menuDeactive = () => {
if (menu.style.display == "block") {
menu.style.display = "none";
}
}
navButton.addEventListener("click", menuActive);
document.body.addEventListener("click", menuDeactive);
This is some JS that I've written, how can this be reduced?
it swaps the text as in hides one div and displays the other.
var directorOne = document.getElementById('directorOne').addEventListener("click", changeText);
var directorOneText = document.getElementById('directorOneText');
function changeText() {
if (directorOneText.style.display === "block") {
directorOneText.style.display = "none";
directorTwoText.style.display = "none";
console.log("luke open");
} else {
directorOneText.style.display = "block";
directorTwoText.style.display = "none";
}
}
var directorTwo = document.getElementById('directorTwo').addEventListener("click", changeText2);
var directorTwoText = document.getElementById('directorTwoText');
function changeText2() {
if (directorTwoText.style.display === "block") {
directorTwoText.style.display = "none";
directorOneText.style.display = "none";
console.log("bruce open");
} else {
directorTwoText.style.display = "block";
directorOneText.style.display = "none";
}
}
Using a single function that is called with the elements as parameters
var directorOneText = document.getElementById('directorOneText');
var directorTwoText = document.getElementById('directorTwoText');
function changeText(t1, t2) {
t1.style.display = (t1.style.display === "block") ? "none" : "block";
t2.style.display = "none";
}
var directorOneClickEvent = document.getElementById('directorOne').addEventListener("click", function(){ changeText(directorOneText, directorTwoText)});
var directorTwoClickEvent = document.getElementById('directorTwo').addEventListener("click", function(){ changeText(directorTwoText, directorOneText)});
#directorOne {background:#333; padding: 20px;}
#directorTwo {background:#ddd; padding: 20px;}
<div id="directorOne">d1<textarea id="directorOneText"></textarea></div>
<div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>
case FOCUS_AA:
if(keyCode == KEY_RIGHT){
focus = FOCUS_AB;
clearTimeout(a);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("bImg").style.display = "block";
document.getElementById("aImg").style.display = "none";
document.getElementById("a0").style.display = "none";
document.getElementById('banana').play();
banana1();
function banana1(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "block";
/*var a = setTimeout(apple2, 1000);*/
b = setTimeout(banana2, 1000);
}
function banana2(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "none";
document.getElementById("b1").style.display = "block";
b = setTimeout(banana3, 1000);
}
function banana3(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "block";
b = setTimeout(banana4, 1000);
}
function banana4(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b2").style.display = "none";
document.getElementById("b3").style.display = "block";
b = setTimeout(banana5, 1000);
}
function banana5(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b3").style.display = "none";
document.getElementById("b4").style.display = "block";
b = setTimeout(banana6, 1000);
}
function banana6(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b4").style.display = "none";
document.getElementById("b5").style.display = "block";
b = setTimeout(banana7, 1000);
}
function banana7(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b5").style.display = "none";
document.getElementById("b6").style.display = "block";
b = setTimeout(banana8, 1000);
}function banana8(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b6").style.display = "none";
document.getElementById("b0").style.display = "block";
b = setTimeout(banana8, 1000);
}
}else if(keyCode == KEY_BACK){
focus == FOCUS_A
window.location.href = 'Shop.html';
}
break;
case FOCUS_AB:
if(keyCode == KEY_LEFT){
focus = FOCUS_AA;
clearTimeout(b);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("a0").style.display = "block";
document.getElementById("aImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('apple').play();
apple0();
function apple0(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple1, 1000);
}
function apple1(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "none";
document.getElementById("a1").style.display = "block";
a = setTimeout(apple2, 1000);
}
function apple2(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a1").style.display = "none";
document.getElementById("a2").style.display = "block";
a = setTimeout(apple3, 1000);
}
function apple3(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a2").style.display = "none";
document.getElementById("a3").style.display = "block";
a = setTimeout(apple4, 1000);
}
function apple4(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a3").style.display = "none";
document.getElementById("a4").style.display = "block";
a = setTimeout(apple5, 1000);
}
function apple5(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a4").style.display = "none";
document.getElementById("a5").style.display = "block";
a = setTimeout(apple6, 1000);
}
function apple6(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a5").style.display = "none";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple6, 1000);
}
}else if(keyCode == KEY_RIGHT){
focus = FOCUS_AC;
clearTimeout(b);
document.getElementById('b_').style.display ='none';
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("c0").style.display = "block";
document.getElementById("cImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('cake').play();
cake1();
function cake1(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake2, 1000);
}
function cake2(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "none";
document.getElementById("c1").style.display = "block";
c = setTimeout(cake3, 1000);
}
function cake3(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c1").style.display = "none";
document.getElementById("c2").style.display = "block";
c = setTimeout(cake4, 1000);
}
function cake4(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c2").style.display = "none";
document.getElementById("c3").style.display = "block";
c = setTimeout(cake5, 1000);
}
function cake5(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c3").style.display = "none";
document.getElementById("c4").style.display = "block";
c = setTimeout(cake6, 1000);
}
function cake6(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c4").style.display = "none";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake6, 1000);
}
} else if(keyCode == KEY_BACK){
focus == FOCUS_B
window.location.href = 'Shop.html';
}
break;
this shows using setTimeout to animate the images.
when i press "KEY_RIGHT" : the images stopped and shows next animated image.
but problem is images overlaps with stopped images and the next images.
how do i remove all the stopped or previous images(FOCUS_AA) when key pressed next step(FOCUS_AB)?
If you were to animate via jQuery, you could call .stop() on all animations and have the always action on animations would be to hide the photos. That way, even if you were in the middle of an animation, the animation would stop, go immediately to the end and the next animation would go.