I am trying to access "main" javascript function inside HTML, and getting reference error says "main" is not defined. Can't see what is missing.
<html>
<head>
<title>dataset</title>
<script>
function main(){
....
}
</script>
</head>
<body onload="main()">
<h1>dataset</h1>
</body>
</html>
Your code works fine, just remove the '...' from your function and add alert('test) OR console.log('test) for testing
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
<script>
function main(){
alert('test');
}
</script>
</head>
<body onload="main()">
<h1>websites dataset</h1>
</body>
</html>
The script has to be defined within the body of the HTML for it to be referenced.
So just rearrange your code to accommodate:
<html>
<head>
<title>websites dataset</title>
<style>
img{
height:100px;
}
</style>
</head>
<body onload="main()">
<h1>websites dataset</h1>
<script>
function main(){
...
}
</script>
</body>
</html>
Related
Any opinions on this? When the user presses the button the initially hidden div must show itself on the page.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
function show() {
$("div").toggle();
}
</script>
</head>
<body>
<p>Animals are cute!</p>
<div><p>Some text gonna blow up some pixels!</p></div>
<button onclick="show()">Click</button>
</body>
</html>
The exactly written error in the Console:
ReferenceError: show is not defined[Learn More
Move the inline script into its own tag. You can't use an external script and inline script in the same tag.
So:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function show() {
$("div").toggle();
}
</script>
function show() {
$(".any-text").toggle();
}
.any-text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p>Animals are cute!</p>
<div class="any-text"><p>Some text gonna blow up some pixels!</p></div>
<button onclick="show()">Click</button>
</body>
</html>
I saw this code sinppet in the SAP documantion:
https://help.sap.com/saphelp_nw74/helpdata/en/91/f1454b6f4d1014b6dd926db0e91070/content.htm
I tried to use it in this simple example below.
what I get is this error message in the console:
Uncaught TypeError: sap.ui.core.plugin.DeclarativeSupport.compile is not a function
how do I solve it?
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules='sap.ui.core.plugin.DeclarativeSupport'
>
</script>
<script>
function addButton(){
console.log('addButton');
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.plugin.DeclarativeSupport.compile(document.getElementById("button"));
}
setTimeout(addButton,10);
</script>
</head>
</html>
Should work this way:
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">
</script>
<script>
sap.ui.getCore().attachInit(function () {
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.DeclarativeSupport.compile(document.getElementById("button"));
});
</script>
</head>
</html>
Live example: https://jsbin.com/gegubuzuni/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
I want to call a function on my body load. I want to render my html page after getting the response from the function. For example:
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
</script>
</head>
<body onload="welcome()">
<p>hai</p>
</body>
I want the hai to be displayed after pressing ok in the alert box. Can anyone help me with this?
You could do something like this:
<head>
<script type="text/javascript">
alert("Welcome");
</script>
</head>
<body>
<p>hai</p>
</body>
This would alert before the body is loaded, then when you clicked 'ok' it would load the body.
You can do it that way:
<html>
<head></head>
<body onload="render()">
<script>
var content = '<h1>Hello, World!</h1>';
function render() {
var answer = confirm('Do you want to render the page?');
if (answer) {
document.body.innerHTML = content;
}
}
</script>
</body>
</html>
And a live demo.
try this
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
welcome();
</script>
</head>
<body>
<p>hai</p>
</body>
You could add a class to the body to make contents not visible and remove it after the function is called..
<html>
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.body.className = '';
}
</script>
<style type="text/css">
.invisible{visibility:hidden;}
</style>
</head>
<body onload="welcome()" class="invisible">
<p>hai</p>
</body>
</html>
Try this code,
<body onload="welcome()">
<p id='hi'></p>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.getElementById('hi').innerHTML='hi';
}
</script>
</body>
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>