so I'm trying to setup PapaParser to parse a CSV file onto arrays that I can later use with another script to make graphs. So far I just want to paste the strings from my arrays onto the blank div, so I can see what's going on. I am new to this and have no idea how to import javascript libraries, so I copied the files into my public_html folder. Now NetBeans seems to see them.
Long story short I'm stuck at the beginning, I get a reference of ReferenceError: Papa is not defined when I try to run my parser.
Any input or a link to a tutorial on how to do this would be greatly appreciated (tried googling, found nothing of use). I've added my code so far...
Papa.parse("TopPercentilesCSV.csv", {
complete: function(results) {
console.log("Finished:", results.data);
}
});
.displaypanel {
border: 1px solid black;
width:400px;
height:400px;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="index.js"></script>
<script src="PapaParse/papaparse.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
Change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="PapaParse/papaparse.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
First you have to include the library, then you can call function defined inside
Related
Hi I'm trying to learn javascript, from these tutorials: https://javascript.info/searching-elements-dom, but I've got stuck and not been able to find a solution to the issue. Apologies if this is a recurring question, but I was not able to find a solution using google, all the answers were that the script needed to be at the bottom of the page which I have. Basically, this works fine:
<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">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
But putting the javascript in a separate file like I have will all the other lessons so far. Both .html and .js are in the same folder.
index.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">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script src="main.js"></script>
</body>
</html>
main.js:
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML);
}
The browser gives me this error:
Uncaught TypeError: elements is not iterable
file:///home/me/javascript/main.js:26
main.js:26:18
I assumed I must have made an error somewhere, so I cut and pasted straight out of the tutorial to make sure I had not made a syntax error, but still it works if inside the html file and not if it's in it's own separate javascript file. How can this be fixed, I'm fairly sure querySelectorAll is exactly what I need for my site, but I want the javascript in a separate file to keep my code consistent.
This seems like a really simple problem but I just can't figure it out. In Chrome's Console log, I keep getting:
Uncaught TypeError: Cannot read property 'clientHeight' of null
This is my HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
</head>
<body>
<div id="deets">
<h1>Document</h1>
<p>Lorem ipsum...</p>
</div>
<canvas id="anim"></canvas>
</body>
</html>
And this is my JS code:
// 1. test main.js is linked to index.html
console.log('it works!!');
// 2. test #document code is available
console.log(document);
// 3. test .getElementById("deets") and get .clientHeight
console.log(document.getElementById("deets").clientHeight);
The First and Second tests work, but I can't figure out what's wrong with the Third. Element id="deets" keeps returning as a null.
Would appreciate any help so much. Thanks!
Something to try:
Consider moving <script src="js/main.js"></script> before the </body>?
This is because we're calling document.getElementById("deets") before the DOM elements are rendered.
If we need to call <script src="js/main.js"></script> in the head, consider using the onload event.
Put your js/main.js file in script tags at the end of your body section and it should work.
This may help you. You should move the script tag to bottom of body tag.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="deets">
<h1>Document</h1>
<p>Lorem ipsum...</p>
</div>
<canvas id="anim"></canvas>
<script src="js/main.js"></script>
</body>
</html>
Not sure what is going on. I feel like it must be something internal with what I have in my gulpfile.js but not really sure. Code is identical to an example my Professor has shown.
This is what I have in app.js
alert(`JavaScript works!`);
This is what I have in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title> Assignment #2 </title>
</head>
<body>
<header>
<h1>My First JavaScript Assignment</h1>
</header>
<main>
<p>If you see/saw an alert box, the JavaScript works. If the background color is pink, then CSS works.</p>
</main>
<script src="js/app.js"></script>
</body>
</html>
This is what I have in style.css
h1 {
text-align: center;
}
body {
background-color: cadetblue;
}
I am doing Bucky Robert's (The New Boston) tutorial on React (hyperlink in the code below).
I'm stuck at the beginning, with just trying to install/load React with the tag instead of using local files. I get two error messages:
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
I bet my problem is pretty basic, but I spent a lot of time trying to figure out what's going on.
<!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>
<!--The tutorial that I'm trying to do https://www.youtube.com/watch?v=2NLgQMs2hOw&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA&index=2-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Basically, I just want to know what the non-buggy version of my code would be so I can do the tutorials.
Your script element doesn't contain regular JavaScript and you omitted the type attribute to show what it does contain.
After searching on the Internet and asking other people, here is what I found.
TypeError: t(...).Object is undefined[Learn More] browser.min.js:8:31612
This issue is related with tags I provided. I was able to solve the problem by using this instead:
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
SyntaxError: expected expression, got '<'[Learn More] test.html:19:24
As was pointed out: I was missing the "marking" of the code with
<script type="text/babel">
Here is the full code, without the two bugs I had:
<!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>
<!--https://reactjs.org/docs/add-react-to-a-website.html-->
<script src= "https://unpkg.com/react#16/umd/react.production.min.js"> </script>
<script src= "https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>test2</h1>, document.getElementById('example'));
</script>
</body>
</html>
Is there a way to get the DOM elements from another HTML file rather than the elements from the HTML file that calls the JS file?
My idea is to make html templates, and render them in a main html file, depending on certain conditions imposed by the JS file.
Something like
var initScreen = new document(URL);
document.getElementById("body") = initScreen.getElementById("body");
supposing that this is the correct way.
Yep. You can fetch a remote (or local) file and then use createHTMLDocument:
document.querySelector(".the_replacer").addEventListener("click", () => {
fetch("https://cdn.rawgit.com/ryanpcmcquen/c22afdb4e6987463efebcd495a105d6d/raw/476e97277632e89a03001cb048c6cacdb727028e/other_file.html")
.then((response) => response.text())
.then((text) => {
const otherDoc = document.implementation.createHTMLDocument("Foo").documentElement;
otherDoc.innerHTML = text;
document.querySelector(".element_on_main_page").textContent = otherDoc.querySelector(".awesome_external_element").textContent;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="element_on_main_page">Replace me, please.</div>
<button class="the_replacer">Replace them.</button>
<script src="index.js"></script>
</body>
</html>
https://repl.it/#ryanpcmcquen/TurboTremendousProgramminglanguages
Here's the remote file's contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="awesome_external_element">Foobar.</div>
</body>
</html>
Browser support is not too bad. On the other hand fetch is pretty modern, so if you are going for legacy support you should use XMLHttpRequest.