Javascript file not showing up on browser - javascript

I'm using Visual Studio to practice javascript. When I save it and click Go Live to open it in a browser, nothing shows up after I select the file. Even though I saved it in a folder with and index file.
Heres the javascript file:
const penholder = {
name: "Bamboo Blessing pen holder",
penVolume: 10,
colour: "bamboo",
heightInches: 6,
diameterInches: 3,
currentPenCount: 2,
penClickStatus: {
whitePen: true,
transparentPen: false,
},
clickPen: function (whiteClickStatus, transparentClickStatus) {
this.penClickStatus.whitePen = whiteClickStatus;
this.penClickStatus.transparentPen = transparentClickStatus;
},
};
console.log("The backpack object: ", penholder);
and here's the index file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Module demo</title>
<script src="bambooPenHolder.js"></script>
</head>
<body></body>
</html>
Can anyone explain what I'm doing wrong? And if you have any suggestions for how I should format my posts here, please let me know. I'm new here.

Related

Struggling with installation RxJS ( VS code )

I've created index.html, attached to it script.js and installed RxJS with npm install rxjs. But there are a lot of issues with that
This is what console writes when I comment out my imports statements
And this is when I use import in script.js
Updated: I have linked
<script src="https://unpkg.com/rxjs#6.5.3/bundles/rxjs.umd.min.js"></script>
to the html, but it didn't work out
Check for the files on GitHub
Ok, i figured it out.
this should be your html (make sure that your cdn math is the right path)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/rxjs#6.5.3/bundles/rxjs.umd.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
and this is your js code:
const { of, fromEvent } = rxjs;
const { map, pluck, mapTo } = rxjs.operators;
const keyup = fromEvent(document, 'keyup');
const keycode = keyup.pipe(
map( event => event.code )
);
const keycodePluck = keyup.pipe(
pluck('code')
);
const pressed = keyup.pipe(
mapTo('Key pressed!')
);
pressed.subscribe(console.log);

I got unexpected value while i was building module for homework

I created an HTML file that has two script
it looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src='src/moduleOne.js'></script>
<script src='src/moduleTwo.js'></script>
</body>
</html>
and the first module of javascript has simple code
(function() {
let hello = 'frank';
})();
and the second one has function inside it
(function() {
function problemIsNotOccur() {
return name === undefined;
}
console.log(problemIsNotOccur());
})();
What should happen is the name should return Error name is undefind or return undefined value
But
name return '' empty string (I don't why that happen)
Your question is not clear in your case name is not defined because is not declared
(function() {
let name; ///name now is undefined
function problemIsNotOccur() {
return name === undefined; /// return true
}
console.log(problemIsNotOccur());
})();
I have just copied your code but instead of using 2 separate files, I put both functions inline and the result is "false" which is what is to be expected. The functions don't make much sense though. The first one only assigns a value to a variable and the other one returns "false" every time because you didn't define "name".
For reference, here is how I tested it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
(function() {
let hello = 'frank';
})();
(function() {
function problemIsNotOccur() {
return name === undefined;
}
console.log(problemIsNotOccur());
})();
</script
</body>
</html>

How can I copy to clipboard specific part of paragraph?

I want to make the method or only copy to clipboard the "syntax" part of a paragraph.
I've done the logic to get the specific part of content I want and stored it in variable "syntaxClean". Now I just need to copy it somehow.
document.execCommand("copy"); would be awesome, but I just can't seem to make it work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<pre id="test"></pre>
<script>
const message = "====== Executor details =======\nathena#21.109.21.25 (tunneled:39516)\n====== Request details ========\nClass....................: com.ericsson.athena.taf.os.linux.commands.common.SimpleCmdRequest\nThread : ................: main\nExpected prompt..........: ^((?![<?]|\\\\.{3}|(\\\\S+\\\\s){6,}).)*[>#$%]+(\\\\\\\\u001B\\\\[(\\\\d;?)*[m|n|K])*\\\\s(\\\\\\\\u001B\\\\[(\\\\d;?)*[m|n|K])*$|#\\\\s\\\\u001B\\\\[6n\nPrompt forced............: false\nTimeout..................: 20000ms\nSyntax...................: lsb_release -i\n"
document.getElementById("test").append(message);
var res = message.split("\n");
for (var i in res) {
if (res[i].indexOf("Syntax") != -1) {
var syntax = res[i].split(':');
var syntaxClean = syntax[1].slice(1);
console.log(syntaxClean);
}
}
</script>
</body>
</html>
In this example I would like to copy to clipboard "lsb_release -i" and I have it stored in variable syntaxClean as I've already said above.
Any help is appreciated!
You can achieve this by creating a dummy textarea like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<pre id="test"></pre>
<button onclick="copy()">Copy</button>
<script>
const message = "====== Executor details =======\nathena#21.109.21.25 (tunneled:39516)\n====== Request details ========\nClass....................: com.ericsson.athena.taf.os.linux.commands.common.SimpleCmdRequest\nThread : ................: main\nExpected prompt..........: ^((?![<?]|\\\\.{3}|(\\\\S+\\\\s){6,}).)*[>#$%]+(\\\\\\\\u001B\\\\[(\\\\d;?)*[m|n|K])*\\\\s(\\\\\\\\u001B\\\\[(\\\\d;?)*[m|n|K])*$|#\\\\s\\\\u001B\\\\[6n\nPrompt forced............: false\nTimeout..................: 20000ms\nSyntax...................: lsb_release -i\n"
document.getElementById("test").append(message);
function copy() {
var res = message.split("\n");
for (var i in res) {
if (res[i].indexOf("Syntax") != -1) {
var syntax = res[i].split(':');
var syntaxClean = syntax[1].slice(1);
console.log(syntaxClean);
copyToClipboard(syntaxClean);
}
}
}
function copyToClipboard(text) {
var dummyElm = document.createElement("textarea");
document.body.appendChild(dummyElm);
dummyElm.value = text;
dummyElm.select();
document.execCommand("copy");
document.body.removeChild(dummyElm);
}
</script>
</body>
</html>

Array methods inside HTML

I'm trying to make a very simple html document with some vanilla JavaScript to sort some elements in it.
I've been able to use .map() to print all the elements of an array, but I'd like to include them in html elements. For example. using an <h1> or a <p>.
This is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body onload="mapping()">
<h1>
<script>
const array = [1, 2, 3];
function mapping() {
array.map(arrayItem => {
document.write(arrayItem)
})
}
</script>
</h1>
</body>
</html>
How can I include HTML inside the script, so I can do something with each one of those returned elements? I mean, something like this:
<script>
const array = [1, 2, 3];
function mapping() {
array.map(arrayItem => {
<h1>document.write(arrayItem)</h1>
})
}
</script>
This should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body onload="mapping()">
<script>
const array = [1, 2, 3];
function mapping() {
array.forEach(arrayItem => {
var newEle = document.createElement('h1');
newEle.innerHTML = arrayItem;
document.body.appendChild(newEle);
});
}
</script>
</body>
</html>
I guess what you want to do is something like this:
<div>
<script type="text/javascript">
document.write("<h1>Main title</h1>")
</script>
</div>
You might want to consider checking the documentation for Javascript at the link I provided. It gives a lot of useful examples and methods. I took the snippet code from there.Hope it helps.

Displaying specific data from a CSV/JSON file

I want to display specific fields from an external CSV file on a web site with using JavaScript.
I tried to parse that file with using "Papa parse" like this:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Parse remote CSV to HTML Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.0/mustache.min.js'></script>
<script>
Papa.parse("https://dl.dropboxusercontent.com/s/....../data.csv?dl=0", {
download: true,
header: true,
complete: function(results) {
console.log(results);
}
});
</script>
</body>
</html>
And this give me the result in console:
console.log
My question is;
How can I display a specific data from this data set in a web site like:
Battery Level: 0.62
Altimeter Pressure: 99.44185
Horizontal Accuracy: 65
etc. etc.
Taking Battery Level as an example (the other fields are similar and you should be able to figure it out youself):
var data = results.data
var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'your_div_id_'+i.toString());
newdiv.innerHTML = 'Battery Level: '+data[i].batteryLevel.toString();
}

Categories

Resources