I created a website using Javascript that works locally but not when I upload to github tried messing with script

Question

I created two different websites. One is a simple dice rolling game and the other is supposed to play drum sounds when different buttons are selected. I can't seem to get either to run successfully on github even though they both work when I use the local files. The common thread between the two is that they both use javascript.

I saw some questions from before when people had similar problems so I checked to make sure I was using the close tag with my script: . And I tried to make sure that there was no mixed content (like http vs https in some places). I don't know what it is I'm missing, but any insight would be greatly appreciated!

https://mobolanleadebesin.github.io/Dice-Game/
https://github.com/MobolanleAdebesin/Dice-Game

// Player 1
var randomNumber1 = ((Math.random()) * 6) + 1;
randomNumber1 = (Math.floor(randomNumber1));

if(randomNumber1 == 1) {
  document.querySelectorAll("img") [0].setAttribute("src", "images/dice1.png");
}
else if (randomNumber1 == 1){
  document.querySelectorAll("img") [0].setAttribute("src", "images/dice2.png");
}
else if(randomNumber1 == 3){
  document.querySelectorAll("img") [0].setAttribute("src", "images/dice3.png");
}
else if(randomNumber1 == 4){
document.querySelectorAll("img") [0].setAttribute("src", "images/dice4.png");
}
else if(randomNumber1 == 5){
  document.querySelectorAll("img") [0].setAttribute("src", "images/dice5.png");
}
else if(randomNumber1 == 6){
  document.querySelectorAll("img") [0].setAttribute("src", "images/dice6.png");
}

// Player 2
var randomNumber2 = ((Math.random()) * 6) + 1;
randomNumber2 = (Math.floor(randomNumber2));
if(randomNumber2 == 1) {
  document.querySelectorAll("img") [1].setAttribute("src", "images/dice1.png");
}
else if (randomNumber2 == 1){
  document.querySelectorAll("img") [1].setAttribute("src", "images/dice2.png");
}
else if(randomNumber2 == 3){
  document.querySelectorAll("img") [1].setAttribute("src", "images/dice3.png");
}
else if(randomNumber2 == 4){
document.querySelectorAll("img") [1].setAttribute("src", "images/dice4.png");
}
else if(randomNumber2 == 5){
  document.querySelectorAll("img") [1].setAttribute("src", "images/dice5.png");
}
else if(randomNumber2 == 6){
  document.querySelectorAll("img") [1].setAttribute("src", "images/dice6.png");
}

// Heading
if( randomNumber1 > randomNumber2){
  document.querySelector("h1").textContent = "Player 1 Wins!";
}
else if (randomNumber1 < randomNumber2){
document.querySelector("h1").textContent = "Player 2 Wins!";
}
else if (randomNumber1 == randomNumber2){
  document.querySelector("h1").textContent = "Its a tie!";  
}
© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

.dice {
  text-align: center;
  display: inline-block;

}

body {
  background-color: #393E46;
}

h1 {
  margin: 30px;
  font-family: 'Lobster', cursive;
  text-shadow: 5px 0 #232931;
  font-size: 8rem;
  color: #4ECCA3;
}

p {
  font-size: 2rem;
  color: #4ECCA3;
  font-family: 'Indie Flower', cursive;
}

img {
  width: 80%;
}

footer {
  margin-top: 5%;
  color: #EEEEEE;
  text-align: center;
  font-family: 'Indie Flower', cursive;

}
© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <div class="container">
      <h1>Refresh Me</h1>

      <div class="dice">
        <p>Player 1</p>
        <img  src="images/dice6.png">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img src="images/dice6.png">
      </div>

    </div>

<script src="index.js" charset="utf-8"></script>
  </body>

  <footer>
    www  App Brewery  com
  </footer>
</html>

Web sites aren't normally run directly from github, it's just used for version control. You need to upload it to a real web hosting service. — Barmar, Aug 07 '19 at 20:02
@Barmar I think the OP is using Github pages, see https://mobolanleadebesin.github.io/DrumKit/ — UncleDave, Aug 07 '19 at 20:03
If you can put it on GitLab, it could be easy to create GitLab pages using `.gitlab-ci.yml` config file, don't know if GitHub has something like this — Dominik Matis, Aug 07 '19 at 20:09
You don't describe what problem you're facing. Git definitely supports hosting HTML files containing JS. I recommend following the steps and asking questions regarding specific errors or steps. — junvar, Aug 07 '19 at 20:14
Welcome to Stack Overflow! Glancing at the repository you linked to, it looks like you're using GitHub Pages (assuming that's what you mean by getting the two pages "to run" on GitHub). Would you mind updating your question with links to the GitHub pages in question. It will be easier to see what you're seeing and find the issue. Thanks! — Mason Stewart, Aug 07 '19 at 20:36
Sorry, this is my first time posting a question, I thought I was asking a specific question. The problem that I'm having is that the webpage I created works locally on my laptop, but for some reason not on github. I don't know what part of my code is causing this error to occur so I didn't post a specific step because until I uploaded it, it was working fine. I saw that other people had a similar problem and posted questions about it, so I tried troubleshooting based on those answers, like here: https://stackoverflow.com/questions/51261710/javascript-file-not-working-on-github-pages no luck. — bolaadebesin, Aug 07 '19 at 20:37
The question should be self-contained, with the necessary code within the question. The trouble with linking off-site files is those files change or disappear, rendering your question useless for future developers. Can you edit your question with a [mcve]? — , Aug 07 '19 at 20:51
@Amy Ah I see. I will remove the links. However, because the webpage loads perfectly fine locally, but not on github pages. I don't know what part of my code is the problem or which part of the code to remove. Just the title and the description appear on the github page. — bolaadebesin, Aug 07 '19 at 21:07
Looking at each of your sites, I don't see a script file being included. The code there does not match what you have added to the question. You can observe this by opening your browsers developer tools, refreshing your site, and looking at the Sources tab. You have an HTML file and CSS, but your JS isn't being included. — , Aug 07 '19 at 21:07
@Amy I see what you're saying! But my index.js file is in the repository along with my css file and my html file. Do you have any idea why it wouldn't be included if the file is present? — bolaadebesin, Aug 07 '19 at 21:21
It is not referenced in your html file. You can have hundreds of JS files in your folder, and every one of them will be ignored unless its specifically referred to. — , Aug 07 '19 at 21:22
@Amy I referenced it using: right before the end of the body. Is that wrong? Should it be higher up in the body? — bolaadebesin, Aug 07 '19 at 21:30
@bolaadebesin Thanks for adding the code in the question, but removing the links was not really helpful. To make the question really self-contained, please provide a) the exact differences between the local and remote deployment and b) what specific error you are getting (not just "doesn't work"). — Bergi, Aug 07 '19 at 21:30
No, that script is not included in the file that you have currently on GitHub. I already said that the code in the question does not match the code that is on the site. — , Aug 07 '19 at 21:33
@Bergi I added the links back in (I'm sure I'll get the hang of this eventually!) — bolaadebesin, Aug 07 '19 at 21:38
@Amy I assure you that the code I posted was copied and pasted directly from the html document in the github repository. If you click on the link (which I added back in to the question) you can see it there, so I don't know why that script doesn't appear on the actual site — bolaadebesin, Aug 07 '19 at 21:46
See your answer below. Make sure the code in your site is what you think it is. Your developer tools are your friend. — , Aug 07 '19 at 21:49

AuxTaco · Accepted Answer · 2019-08-07T22:17:14.277

0

Github Pages faithfully represents the structure of your Github repository. When you go to https://mobolanleadebesin.github.io/DrumKit/, you're looking at the root of that repo. The only file there is README.md, which Github takes to be the "index" of that directory, so it converts it to HTML and serves it to you.

Your actual files are in a folder called Drum Kit Starting Files 2, so to see them online, you need to go to https://mobolanleadebesin.github.io/DrumKit/Drum Kit Starting Files 2/. If you don't want that URL, move your files out of the folder and into the root.

edited Aug 07 '19 at 22:17

answered Aug 07 '19 at 21:33

AuxTaco

4,883
1
12
27

thank you! That was really helpful. I was able to fix the drumkit webpage. I tried to use the same solution for the dice game, but was unsuccessful. If you have any other tups or suggestions I would appreciate it! Thanks! – bolaadebesin Aug 08 '19 at 13:18

I created a website using Javascript that works locally but not when I upload to github tried messing with script

1 Answers1