CountUp is not defined - javascript

I'm trying to use this countUp.js library to achieve that nice rising number animation. I found a cdn and put it in my code and followed a tutorial on how to use it.
Repo https://github.com/inorganik/countUp.js
CDN https://cdnjs.com/libraries/countup.js/2.0.0
Tutorial https://www.youtube.com/watch?v=cJ-T8Gb12lI
index.html
<!DOCTYPE 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="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.0/countUp.min.js" integrity="sha512-E0zfDwA1CopT4gzJmj9tMpd7O6pTpuybTK58eY1GwqptdasUohyImuualLt/S5XvM8CDnbaTNP/7MU3bQ5NmQg==" crossorigin="anonymous"></script>
</head>
<body>
<div id="counters">
<p id="counter1">0</p>
</div>
<script>
let demo = new CountUp('counter1', 0, 100);
demo.start();
</script>
</body>
</html>
This code gives me Uncaught ReferenceError: CountUp is not defined in the console.

As described in the docs on including Countup the CDN version is served as a module.
One option is to use the non-module umd version
this is what they do in their demos
const c = new countUp.CountUp("counter1", 500)
c.start()
<script src="https://inorganik.github.io/countUp.js/dist/countUp.umd.js"></script>
<div id="counters">
<p id="counter1">0</p>
</div>

I think you have not used the right source for the countup library. Try this:
let demo = new CountUp('counter1', 0, 100)
demo.start()
<script
src="https://cdn.jsdelivr.net/npm/countup#1.8.2/countUp.js"
></script>
<div id="counters">
<p id="counter1">0</p>
</div>

Related

cannot link css file to file

for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.

Uncaught TypeError: Cannot read property 'clientHeight' of null Chrome 2020

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>

Import class from module without ES6

I am attempting to use Material's snackbar with ES5 JavaScript. By doing this, I can't use ES6's import functionality. Therefore, I am referencing the CSS file and JS file through link href='...' and script src='...'.
When declaring a variable with var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar')), I receive the error:
Snackbar.aspx:722 Uncaught ReferenceError: MDCSnackbar is not defined
Here is my HTML:
<!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>
<link rel="stylesheet" href="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.css">
<script src="../_catalogs/masterpage/Custom/snackbar/node_modules/#material/snackbar/dist/mdc.snackbar.min.js"></script>
</head>
<body>
<div class="mdc-snackbar">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
Can't send photo. Retry in 5 seconds.
</div>
<div class="mdc-snackbar__actions">
<button type="button" class="mdc-button mdc-snackbar__action">Retry</button>
</div>
</div>
</div>
</body>
<script>
var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
</script>
</html>
How can I 'import' MDCSnackbar without using ES6's import functionality?
You could use the CDN version maybe as explained in their docs Material-ui cdnhere is the github example of the material-ui cdn example.

Basic installation of React using the <script> tag

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>

ReferenceError: Papa is not defined

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

Categories