I'm new to JavaScript and I'm getting this error. here below is my code:
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js">
function hide() {
// some actions
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
What could be the problem?
Try below code
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js" />
<script>
function hide() {
// some actions
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
Hey guys here is the answer but I dont know why should I write the script tag twice. Can someone explain?
<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js" ></script>
<script>
function hide() {
var imgElem = $("#myImgId" );
console.log("bastın");
imgElem.css({'display': 'none' })
}
</script>
</head>
<body>
<img id="myImgId" src="http://www.google.com/images/srpr/logo4w.png" onclick="hide()" style="position:absolute;opacity:0.5;left:50%;top:50%;width:50px;height:50px;margin-left:-25px;margin-top:-25px;z-index:100;"/>
</body>
Related
It should be straight forward but I can not get a function to change the image on button click. Please can anyone spot what is wrong with the below code. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp4</title>
<!-- BlankCordovaApp4 references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Greeting!</p>
<img id="demo" src="images/hello.jpg" width="180" height="123">
<button id="Btn" type="button" onclick="changeImage();">Click Me</button>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<script>
function changeImage() {
document.getelementbyid("demo").src = "images/bye.jpg";
};
</script>
</body>
</html>
It should be:
document.getElementById("demo").src = "images/bye.jpg";
Case matters in javascript: getelementbyid is not the same as getElementById.
I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
Problem is here
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//js code
</script>
Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
//js code
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
You are trying to call the jQuery library while also implementing your code snippet here:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
You should be first loading the jQuery library and then implementing your code snippet like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event){
alert("HI");
});
});
</script>
The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:
Load the script
Declare your code
Hope that helps!
The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript">
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ezcap.css">
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5">abcd</div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
</body>
</html>
Your problem was including your code in that script tag for jQuery.
Change to this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ezcap.css">
</head>
<body>
<div class="container">
<div id="sidebar">
<div id="sbheader"></div>
<div id="button2"></div>
<div id="button3"></div>
<div id="button4"></div>
<div id="button5"></div>
</div>
<div id="header">lol</div>
<div id="footer">feg</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
alert("HI");
$(document).ready(function(e){
alert("Hi");
$("#button5").click(function(event)
{
alert("HI");
});
});
</script>
</body>
</html>
Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?
And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?
Your <link> for CSS needed to be inside your <head>
I want to fade in the page upon load. I looked at other forms on here and somehow it just isnt working for me...
Javascript file:
window.onload = init;
function init() {
$('#container').fadeIn('slow');
}
One of the pages:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Apparel</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="effects.js"></script>
</head>
<body>
<div id="cart">
<img src="shopcart.jpg" height="30px">
</div>
<div id="container">
<div id="nav">
<p id="sb">Apparel</p>
<p id="about">HOME</p>
<p id="srv">OUTERWEAR</p>
<p id="srv">CLOTHING</p>
<p id="pjt">SHOES</p>
<p id="pjt">ACCESSORIES</p>
<p id="about">ABOUT</p>
<p id="cont">CONTACT</p>
</div>
<div id="imgcontainer">
<img src="homeimg.jpg">
</div>
</div>
</body>
</html>
Put
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
above
<script src="effects.js"></script>
This exposes the $ variable (aka the jQuery library) that you're using when you do $('#container')
You'd better replace the window.onload to $(function(){});
Here is the code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//window.onload = init;
$(function(){
init()
});
</script>
Enjoy it : )
I’m trying to implement this in my code but I don’t know what is the matter. I searched a lot but I could not discover where is the problem in my code. Thank you in advance.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js" />
<script type="text/javascript" src="jquery.watermark.js" />
</head>
<body>
<input type="text" width="300px" id="input">
<script type="text/javascript">
$("#input").watermark("Heee");
</script>
</body>
</html>
Update:
I have edited my code and still get this result:
My edited code:
<html>
<body>
<input type="text" width="300px" id="input">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js" />
<script type="text/javascript" src="jquery.watermark.js" />
<script type="text/javascript">
$("#input").watermark("Heee");
</script>
</body>
</html>
Make sure you always wrap your jQuery code around a document ready function, like this...
$(document).ready(function() {
$("#input").watermark("Heee");
});
Hi i tried with your code but i wont work, I added the head tag and use the ready function and now works well. I hope it helps. Regards
Regards
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.watermark.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('#inputId').watermark('Required information');
});
</script>
<body>
<input type="text" width="300px" id="inputId">
</body>
</html>
Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('hei');
});
</script>
</head>
<body>
<input type="button" id="btn" />
</body>
</html>
I'm getting an "object not supported" error on $(document).ready. I'm also getting this error: Uncaught SyntaxError: Unexpected token ILLEGAL
Your code seems to be correct, it looks like jQuery file is not loaded, verify that it has correct path.
This works:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { alert('hi'); });
</script>
</head>
<body>
</body>
</html>