My entire code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>React course</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
alert('Removing comment');
},
render: function() {
return (
<div className="commentContainer">
<div className="commentText">Text of whatever</div>
<button onClick={this.edit} class="btn-primary">Edit</button>
<button onClick={this.remove} class="btn-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment>Heya</Comment>
</div>
,document.getElementById('container'));
</script>
</body>
When I refresh the page I see nothing. Then I inspect the element and I see the error that you see in the image but I do not really know what is going know since am new in react.
Hope you can help
I think it because you don't have an html element with an id of container. This section must reference a valid HTML element. document.getElementById('container'));
Try changing the id of example to container.
Related
JS:
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body onload="siteTitle()">
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">
a
</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I have tried changing it multiple times with things I have found from other questions and website but I cannot fix this
The script worked when placed directly in the tag but not when imported
Thank you for your help
The following codes works for me well.
If these codes doesn't work for you, check your browser and update it.
try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">a</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
</body>
</html>
with
window.onload = () => {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Since you're calling the function from <body onload="siteTitle()"> you need to define it with a normal function definition, not by assigning to window.onload.
function siteTitle () {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Try giving a name to your function like this
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
because you are giving siteTitle as a function but it is a parameter
I am not sure but it can work for you.
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
I am actually using the pages/_document.js hook to add Bootstrap and jQuery to my pages, by the way I set the <Head>
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<title>Default title</title>
<link rel="stylesheet" href="/static/lib/bootstrap3/css/bootstrap.min.css" />
</Head>
<body>
<Main/>
<NextScript/>
<script src="/static/lib/jquery3/jquery-3.3.1.min.js" />
<script src="/static/lib/bootstrap3/js/bootstrap.min.js" />
</body>
</html>
)
}
}
Now I would like to set a different Title,for my pages. Is it possible to used <Head> outside of Document ? I mean in <div> like this:
const ContactPage = () => {
return (
<div>
<Head>
<title>You better contact us!</title>
</Head>
<div className="page-body">...</div>
</div>
)
}
And if possible, will it overwrite or merge what is already set in pages/_document.js ?
You want to use the next/head component:
import Head from 'next/head'
export default () =>
<div>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hello world!</p>
</div>
See the docs: https://nextjs.org/docs/api-reference/next/head
I'm a React JS newbe. I have a very simple code which uses an alert in a function that is supposed to be triggered by an onClick. However, the event does NOT get triggered in Chrome (or any other browser). What am I missing? I've googled, and played around with the code, but just can't seem to figure it out.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Template</title>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Comment = React.createClass({
edit: function () {
alert('Editing comment');
},
remove: function () {
console.log("Removing");
alert('Removing comment');
},
render: function () {
return (
<div className="commentContainer">
<div className="commentText">{this.props.children}</div>
<button onclick={this.edit} className="button-primary">Edit</button>
<button onclick={this.remove} className="button-danger">Remove</button>
</div>
);
}
});
ReactDOM.render(
<div className="board">
<Comment title="Blah">Blah</Comment>
</div>
, document.getElementById('container'));
</script>
</body>
</html>
It's onClick, not onclick. See https://facebook.github.io/react/docs/handling-events.html
React events are named using camelCase, rather than lowercase.
I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo