Vue.js not being recognised with CDN - javascript

Hi I am currently learning Vue.js and I have an issue with it, I am calling Vue using a CDN.
I have followed instructions but it does not seem to be recognising that Vue exists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
</html>
This is the simple js file It does not output the code from the Vue object.
Would really appreciate any help on this.
const app = vue.createApp({
data () {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');

It should be Vue.createApp instead of vue.createApp.
Working Fiddle
const app = Vue.createApp({
data() {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
<title>Vue Basics</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>

Related

"undefined" message when trying to Display json predefined data on HTML page

I have predefined json data 👉 https://www.reddit.com/r/science.json and i want to display the contents of this data in a html page but th message i get is "undefined'.
My HTML code:
$.getJSON('https://www.reddit.com/r/science.json', function(myDataset) {
var data = myDataset;
console.log(data);
var test2 = data.children[1];
var data1 = data[0];
console.log("data1");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Second assignment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello mama </h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I want to display that data in an array on my web but i dont understand why i get the undefined message.
Thanks in advance for your support.
You mean this?
$.getJSON('https://www.reddit.com/r/science.json', function(myDataset) {
var data = myDataset.data;
var children = data.children;
var children0 = children[0];
console.log("children0", children0);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Second assignment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello mama </h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

Javascript codes not responding

My javascript code is not responding at all. Even simple codes like alert("Hello World"); both external files and internal scripts, jQuery etc are not all responding
example
<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="./assets/css/style.css">
<link rel="stylesheet" href="./assets/Animate CSS/animate.min.css">
<link rel="stylesheet" href="./assets/OWL JS/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./assets/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="animate__animated right-0 wow animate__zoomIn bg-primary"><span class="fa fa-bars"></span> Hello World</h1>
<div class="wow backInRight">
Content to Reveal Here
</div>
<noscript>Hello</noscript>
<script>
new WOW().init();
alert("Hello word");
for (i = 0; i < 10; i++) {
alert("Hello" + i);
}
</script>
<script src="./assets/JQuery/jquery.min.js"></script>
<script src="./assets/Popper JS/popper.min.js"></script>
<script src="./assets/Wow JS/wow.js"></script>
<script src="./assets/Bootstrap/bootstrap.min.js"></script>
<script src="./assets/OWL JS/owl.carousel.min.js"></script>
</body>
</html>```

After Angular 8 upgrade the Angular scripts are inserted at the start of the HTML document

I upgraded from Angular 7.2 to Angular 8 and now all the Angular scripts are inserted at the very start of the HTML (before !DOCTYPE).
Is this a bug? Does anyone know what might be causing it?
<script src="runtime.js" defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script><!DOCTYPE html>
<html>
<head>
<base href="/my-app/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
My original HTML is pretty standard. The only oddities are an ng-app-settings.js script that loads some JSON for app config and the use of the TypeKit service for fonts. Neither of these caused a problem for Angular 7.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
Thanks for any help
Try adding body tags to your HTML.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</body>
</html>

Why is this JavaScript button click failing to call a function?

I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.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"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!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" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.

Why won't my picture appear in ReactJS?

I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`
require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));

Categories