Hello, I am working in the Workspace environment. I wanted to practice some if…else statements for a work related project. My script works when I run it in the “lesson” environments. However, when I hit “run+save” button in the Workspace environment nothing populates except the original “Hello World” page.
How can I fix this? Thanks!
Can I have images and/or videos of your problem.
Sure, thank you! Here are screenshots of my code
and then what the Workspace shows
Please let me know if you need anything else
What is in the HTML file because that’s probably being displayed.
As you mention that, I just realized that I have not yet gotten into HTML of my “Full Stack Engineer” course. So I am assuming that I need to integrate my js file into the HTML for it to be displayed??
Yea looking at the HTML that is what is being displayed. You will need to use different syntax probably for the JS to show up witch you will probably learn later in the Path.
This makes sense! Thank you!
I think there’s now an option to create a workspace that’s only JavaScript (using Node.js)
I actually did this for a previous project:
Although I had to redefine console and console.log to make stuff print out to the screen when I used console.log()
And I had to put defer inside the HTML script tag so the JavaScript runs after the HTML page loads.
I missed one line of code the previous time I posted this.
HTML file’s code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href='style.css' rel='stylesheet' />
</head>
<body>
<script src='script.js' defer></script>
<div id="outputs-surround">
</div>
</body>
</html>
JavaScript file code:
// function to convert object or array to string that's easier to display:
function str(stuff) {
if (stuff === undefined) { return ""; }
if (Array.isArray(stuff)) {
let output = "[";
for (var item of stuff) {
output += str(item) + ", ";
}
if (stuff.length == 0) {
return output + "]";
}
else {
return output.slice(0,-2) + "]";
}
}
else if(typeof(stuff) == 'object') {
let output = "{";
for (var key in stuff) {
output += key + ": " + str(stuff[key]) + ", ";
}
if (key) {
return output.slice(0,-2) + "}";
}
else {
return output + "}";
}
}
else {
return stuff;
}
}
// function to make stuff appear on the webpage:
function main(...args) {
const outputs_surround = document.getElementById("outputs-surround");
const additional = document.createElement("SAMP");
additional.innerText = "main function running ...";
additional.style.color = "red";
additional.style.display = "block";
outputs_surround.appendChild(additional);
const console = document.createElement("SAMP");
outputs_surround.appendChild(console);
const ending = document.createElement("SAMP");
ending.style.color = "red";
ending.style.display = "block";
console.log = function(text) {
this.innerText += str(text) + " \n"; }
try{
//////////////////////////////////////////////
/* beginning of code to be tested */
console.log("hello world!");
/* end of code to be tested */
//////////////////////////////////////////////
}
catch(error) {
ending.innerText = "error: " + error; // + '\n';
ending.innerText += "\nmain function ended.\n\n";
outputs_surround.appendChild(ending);
return 1;
};
ending.innerText += "main function ended.\n\n";
outputs_surround.appendChild(ending);
return 0;
}
main(); // run the main function
and the CSS code:
body {
background: #000;
color: #fff;
padding: 25px;
font-family: sans-serif;
}
samp {
white-space: pre-wrap;
}
thank you for the explanation. i will parse through it to make sense of how to apply it to my own js code to make it show up on the html file