Second JavaScript Not Work On Same HTML Page Why?

Question

Can anyone help me please with this problem I'm having.

I have this website where it has a photo gallery function programmed on it. You press one arrow button and it will show the next image in a sequence of images. Press the previous arrow button and it will show the previous image from the sequence. This webpage that it is on is designed for both desktop and mobile devices so it will layout the website different depending on which device it is on.

The functionality of the photo gallery works fine on the mobile version of the website but on the desktop version of the website it will not go to the next image in the sequence. Below is Desktop HTML code for it

var slideIndex = 1;
                showDivs(slideIndex);
                function plusDivs(n) {
                  showDivs(slideIndex += n);
                }

                function currentDiv(n) {
                  showDivs(slideIndex = n);
                }

                function showDivs(n) {
                    
                  var i;
                    
                  var x = document.getElementsByClassName("mySlides"); 
                    if (n > x.length) {slideIndex = 1} 
                    if (n < 1) {slideIndex = x.length} 
                    for (i = 0; i < x.length; i++) 
                    {
                        x[i].style.display = "none";
                    }
                    x[slideIndex-1].style.display = "block";  
                }

<div class="photoGallery" style="max-width:200%">

    <img class="mySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
    <img class="mySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Thief.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Vampire.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Werewolf.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
    <img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
    <div class="leftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
    <div class="rightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
    <script src="../JavaScript/DESKTOP_Photo_Gallery.js"></script>

Mobile HTML of it:

    <div class="mobilephotoGallery" style="max-width:200%">

    <img class="mobilemySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
    <img class="mobilemySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Thief.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Vampire.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Werewolf.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
    <img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
    <div class="mobileleftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
    <div class="mobilerightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
    <script src="../JavaScript/Mobile_Photo_Gallery.js"></script>

Please refer to this, it'll be helpful https://codepen.io/masis/pen/ybObXZ?editors=1010 — chintuyadavsara, Mar 18 '19 at 17:55
@ScottMarcus - You're totally right - It's monday and I need to get of SO. — Jack, Mar 18 '19 at 18:04

mp9007 · Answer 1 · 2019-03-18T19:44:48.097

0

I see that in your code, you only get the elements using "mySlides" class.

var x = document.querySelectorAll(".mySlides");

If you want to target the "mobilemySlides" elements, you have to find a way to tell your javascript which elements you want to get.

For example, you could add a second parameter to your function

function showDivs(n, selector){ ... }

And then update your DOM query:

var x = document.querySelectorAll(selector);

Finally, call the showDivs function:

<div class="leftButton" onclick="plusDivs(-1, '.mySlides')">

Or

<div class="leftButton" onclick="plusDivs(-1, '.mobilemySlides')">

here is a working example: https://codepen.io/mp-9007/pen/RdBwYb . I removed the width 100% just so we can see better.

EDIT Updated code based on @Scott Marcus comment. Changed the .getElementByClassName() for .querySelectorAll()

edited Mar 18 '19 at 19:44

answered Mar 18 '19 at 17:59

mp9007

79
2
11

Can you give a an example of that would be write in code please. – Random Binaries Mar 18 '19 at 18:01
And [don't use `.getElementsByClassName()` at all](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and instead use `.querySelectorAll()`. – Scott Marcus Mar 18 '19 at 18:41

Second JavaScript Not Work On Same HTML Page Why?

1 Answers1