Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nikoxyz
nikoxyz
10,419 Points

JavaScript code won't run when I tweak them on my text editor or codepens/ playgrounds

I copied and pasted html, css, and javascript codes from Workspaces, and would like to tweak the code to include more comments and use my own ideas to make quizzes, arrays, and other programs.

I also created accounts with Codepen, Liveweave, and Codeply to decide which one to use as a portfolio for my coding skills.

Just by testing the original Workspace files on Brackets, there are already several errors from JS Lint. The code, especially the JS prompt command, would not run on various code playgrounds either. The html and css will run fine in Brackets and the code playgrounds. The Workspaces worked fine on Treehouse, and can run prompt windows and JavaScript with no errors. Do errors like these happen because Treehouse is relaying the code through a server? I allowed Google Chrome to get pop up windows, yet the prompt will not come up. Also, I changed the src attribute for the css and js files to draw them from the same directory as the index.html file.

Steven Parker
Steven Parker
241,770 Points
Steven Parker
Steven Parker
241,770 Points

Would you consider posting the workspace snapshot and codepen (..etc) links for analysis?

6 Answers

Steven Parker
Steven Parker
241,770 Points
Steven Parker
Steven Parker
241,770 Points

:point_right: Your program stops (and only when you give a correct answer), because "correct" is not defined.

Just add this to the top of your JavaScript file:

var correct = 0;
rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

It will help if you post links to your code so that we can take a look at any errors or odd behavior.

You can also try downloading the workspace files using the download links below the course video. Once you have the files, you can upload them to whatever service you would like to use. It's possible that when you copy-pasted, a file was misnamed or altered automatically.

nikoxyz
nikoxyz
10,419 Points
nikoxyz
nikoxyz
10,419 Points 
//ask questions
var answer1 = prompt("Name the programming language that's also a gem.");
  if (answer1.toUpperCase() === "RUBY") {
    correct += 1;
  }

var answer2 = prompt("Name the programming language that's also a snake.");
  if (answer2.toUpperCase() === "PYTHON") {
    correct += 1;
  }

var answer3 = prompt("What language do you use to style web pages?");
  if (answer3.toUpperCase() === "CSS") {
    correct += 1;
  }

var answer4 = prompt("What language provides structure of a web page?");
  if (answer4.toUpperCase() === "HTML") {
    correct += 1;
  }

var answer5 = prompt("What language provides interactivity on a web page?");
  if (answer5.toUpperCase() === "JAVASCRIPT") {
    correct += 1;
  }

//output results

document.write("<p>You got " + correct + " out of 5 questions correct.</p>");

//output rank

if(correct === 5) {
  document.write ("<p><strong>You got a gold crown!</strong></p>");
} else if (correct >=3) {
  document.write ("<p><strong>You got a silver crown!</strong></p>");
} else if (correct >=1) {
  document.write ("<p><strong>You got a bronze crown!</strong></p>");
} else {
  document.write ("<p><strong>No crown for you. Study more, and better luck next time.</strong></p>");
}

This is from one of the Workspaces. It ran OK on Treehouse, but if I put this on JS Lint there are errors. For some strange reason, only the first question pops up when I run this on the browser. After I type the answer, it stops. However, if I press cancel, all the other prompts appear.

nikoxyz
nikoxyz
10,419 Points
nikoxyz
nikoxyz
10,419 Points 
html,
body,
div,
h1,
h2,
p,
ul,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ul {
  list-style: none;
}

section {
  display: block;
}

body {
  background: #edeff0;
  padding: 50px 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
}

h1,
h2 {
  font-size: 2.4em;
  font-weight: 400;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;
}

h2 {
  font-size: 1.8em;
}

p {
  color: #8d9aa5;
  font-size: 1.4em;
  margin-bottom: 15px;
  line-height: 1.4;
}

.container {
  box-sizing: border-box;
  width: 90%;
  max-width: 1080px;
  background: white;
  padding: 30px 15px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.button {
  background: #3f8abf;
  padding: 8px 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4em;
  color: white;
  font-weight: 500;
  border: 3px solid #3f8abf;
  outline: none;
  cursor: pointer;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 0 0 #3574a0;
  -moz-box-shadow: 0 2px 0 0 #3574a0;
  box-shadow: 0 2px 0 0 #3574a0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.button:hover {
  background: #397cac;
  border-color: #397cac;
  -webkit-box-shadow: 0 2px 0 0 #2c6085;
  -moz-box-shadow: 0 2px 0 0 #2c6085;
  box-shadow: 0 2px 0 0 #2c6085;
}

This is the css file

nikoxyz
nikoxyz
10,419 Points
nikoxyz
nikoxyz
10,419 Points 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <title>The Ultimate Quiz Challenge</title>
 </head>
<body>
  <div class="container">
  <h1>The Ultimate Quiz Challenge</h1>
   <script src="quiz.js"></script> 
  </div>
</body>
</html>

The html file. Note the paths for the css and js files. All three should run fine, but I want to know why that didn't happen.

nikoxyz
nikoxyz
10,419 Points
nikoxyz
nikoxyz
10,419 Points

Ok, thanks! I will try that.