I'm very new to jQuery, but from what I've read, this doesn't make sense to me. Here is my code:
$(function() {
function grid() {
$("#main").hide();
}
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button onclick="grid()">grid</button>
</div>
</body>
</html>
When I put$(function(){...}); around my code, it never runs and the console returns ReferenceError: grid is not defined, but if I remove $(function(){...}); then everything runs fine.
The code within $(function() { }) has its own scope, so when you define a function within that, that function only exists within that scope. However, you have:
<button onclick="grid()">grid</button>
Which looks for a function called "grid" in the global scope (where it doesn't exist).
Ideally, if you are using jQuery, you would do something more like:
<button id="grid">grid</button>
$(function(){
$('#grid').on('click', function() {
$("#main").hide();
});
});
you can call a javascript function or define onClick listener of button inside $(document).ready
// using jquery
$(document).ready(function() {
$('#grid').click(function(){
$("#main").hide();
});
});
// using javascript function
function grid(){
document.getElementById('main').style.display = 'none';
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="numbers.js"></script>
</head>
<body>
<div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
<button id="grid">grid</button>
<button onclick="grid()">grid2</button>
</div>
</body>
</html>
Related
I want to call a function from java-script file in my html page. My code is shown below.
index.html
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(function() {
myFunction1(); // call function
});
</script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="socket.io.js"></script>
</body>
</html>
main.js
$(function() {
function myFunction1() {
alert("ff");
}
myFunction1() is my function. It is inside $(function() {}. But it is not working.
It is working when wrote in main.js
function myFunction1() { // function declaration in global scope
alert("ff");
}
How to define myFunction1() inside $(function() {} in main.js? Please help me?
Try this:
(function() {
function myFunction1() {
alert("ff");
}
})()
Notice the syntax errors in the last line })().
In my opinion it doesn't look like it really need to be nested inside the anonymous function. If you remove it it should just fine.
Try to call your function myFunction1() inside .ready() event
It will execute when the DOM is fully loaded.
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
</script>
<!DOCTYPE html>
<html>
<head>
<!--
You can uncomment this in your case
<script type="text/javascript" src="js/main.js"></script>
-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Web1</h2>
<script>
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
Here is your answer.
Let me inform if it is helpful to you or not. Thank you!
You are missing import jQuery and syntax errors in the last line })()
Try This :
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
You need jquery for using parts of it later.
Basically you need to switch function declaration and function call, because inside of jquery's onload, you need the call of the function.
Puth the function declaration outside in the global scope.
function myFunction1() { // function declaration in global scope
alert("ff");
}
$(function() {
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
Version with local function declaration.
$(function() {
function myFunction1() { // local function declaration
alert("ff");
}
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
leads to "ReferenceError: Can't find variable: blub"
What most likely obvious thing am I missing?
Try this :
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
Instead of using :
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
In your code you are calling a function(callback) without declaring it. this is not correct way to declaration a function.
JavaScript Functions
According your code you don't need to do any thing on document ready because your function trigger when anyone click on anchor Link. And the second thing is your code is not correct see this one $("#content").attr("data-x") Here you trying to get the data-x attribute of content div, but your div does not contains that attribute use this $("a").attr("data-x"):
Try the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub() //-- It's declarition of an function
{
var x = $("a").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
Working Example
try this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
The reason you're getting the error is because it can't find the value .attr("data-x"); on the tag <div id="content">. It simply doesn't exist there. If you're looking to append the data-x="12" as a value inside the <div> tag, you could do something like this:
<html>
<body>
<div id="content">
Link
<br/>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$('a[data-role="appender"]').click(function (e) {
e.preventDefault();
var x = $(this).data('x');
$('#content').append(x);
});
});
</script>
</html>
The code above attaches the code to the .click function in jQuery and is wired up using the $('a[data-role="appender"]') which makes your mark up a little bit cleaner. Hope this helps out ! The working solution can be found here: http://jsfiddle.net/TrV8z/
The function blub is local to your script because your passed it as an argument to the jQuery object by wrapping your code with $(...);. Your function is executed when the DOM finishes loading, but in a local scope, which you cannot access from an event attribute. The best way to solve your problem would be not to use an event attribute. Moreover, the div #element doesn't have a "data-x" attribute. Its child a element has one. Try this:
$(function() {
$("#targetlink").click(function(e) {
e.preventDefault();
var x = $("#targetlink").attr("data-x");
$("#targetlink").append(x);
})
});
For example suppose I have
function myTest() {
return "test";
}
defined in <head>
In body if I try to call myTest() it fails. How can I make functions and variables accessible from body?
Script in the head tag will get parsed first, so your variables and functions are accessible from script in the body tag. Your problem must be elsewhere, because the following example works:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function myTest() {
return "test";
}
</script>
</head>
<body>
<script type="text/javascript">
alert(myTest());
</script>
</body>
</html>
You need to place all JavaScript into <script>...</script> tags, OR, place it in event handling attributes (like onclick).
<html>
<head>
<script type="text/javascript">
function myTest() {
alert("hi");
}
</script>
</head>
<body>
<input type="button" onclick="myTest();" />
</body>
</html>
This is Your function in Head..
function myFunction(a)
{
return (a)
}
Then call like below
<script type="text/javascript">
myFunction(12);
</script>
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API