Setting button to change image Javascript - javascript

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.

Related

Missing instance data Datepicker while using iframe and jquery dialog

There are two versions of code. The first version is there is a main page containing an iframe and dialog <div>. The iframe will load the dia.html into the parent <div id="popdiv"> and fire it as a dialog. The dialog itself will initiate a Datepicker with elem.datepicker();.
The second version is just the ideal version for what I want which is an iframe fire the parent main page dialog and have a Datepicker running. But this approach cannot load the dia.html page into the <div id="popdiv"> which is not as handy.
My question:
Why is that when I want to select the element$('#myInput', window.parent.document) in the dia.html, I need to add window.parent.document after selector?
I try to figure it out by checking the html code in development tools. But I had no idea why it is required. How does query Dialog work?
How to make the elem.datepicker(); inside the dia.html work inside the dialog if I want to use the .load('dia.html') approach? What was the reason it didn't work?
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<div id="popdiv"></div>
<iframe src="iframe1.html" height="800" width="800"></iframe>
</body>
</html>
iframe1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
</head>
<body>
<p>iframe1</p>
</body>
</html>
dia.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
var elem = $('#myInput', window.parent.document);
alert(elem.val());
elem.datepicker();
});
</script>
</head>
<body>
<p>Date: </p>
<input id="myInput" value="22" />
</body>
</html>
working version
change it to not load html
iframe1.html (working)
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
//parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
main.html (working)
<div id="popdiv">
<p>Date: </p>
<input id="myInput" value="22" />
<script>$('#myInput').datepicker();</script>
</div>

Success animation tutorial not running CSS

I'm on a tutorial to create a success check mark with an animation.
I already created all the elements such as the box for the alert etc but have trouble with an animation.
Here is the code example I'm following : Link
I tried to do it on my computer putting the HTML part and the JS together and the css in a style.css sheet but doesn't work :(
Here is the HTML document :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Test</title>
<script>
$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>
I didn't copy the css as it is the same as is the link and a long code..
It gives me a white screen and a lot of warnings on code inspection :
As I'm doing something wrong please ?
Thank you for your help,
Jerry
jQuery is missing from your code, try adding adding it in the <head> section.
EDIT: You are also using a wrong .css file. I think you copied the uncompiled SCSS from the tutorial. To fix this, go back to the CodePen example and on the top-right corner of the CSS section open the context menu and click "View Compiled CSS". Then copy the CSS into style.css
Here is a working solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(() => {$("button").click(function () {
$(".check-icon").hide();
setTimeout(function () {
$(".check-icon").show();
}, 10);
});});
</script>
</head>
<body>
<div class="success-checkmark">
<div class="check-icon">
<span class="icon-line line-tip"></span>
<span class="icon-line line-long"></span>
<div class="icon-circle"></div>
<div class="icon-fix"></div>
</div>
</div>
<center>
<button id="restart">Restart Animation</button>
</center>
</body>
</html>

jQuery alert does not work

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>

JQuery slideDown() not working

I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/

use external .js to call .bind()

im trying to call
.bind("click")
from an external .js file (js1.js).
here is the code:
js1.js:
$(function() {
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
page.html:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
</head>
<body>
<p>Click me!</p>
</body>
this code does not work in my files.
i found it from w3scools and it is working in their site:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click me!</p>
</body>
</html>
how can i make it running from my external .js? any ideas?
thanks.
By the looks of it, you haven't added jQuery on your page yet. Add jQuery prior to your script.
<link rel="stylesheet" type="text/css" media="screen" href="./css/mystyle.css" />
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="./js/js1.js"></script>
<title>New WebPage</title>
If you forget to add this line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
so add it in your <head> </head> section first. Otherwise your script could not work.
Bellow the complete code which working for me..
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#p').bind('click', function(){
alert('The paragraph was clicked.');
});
});
</script>
<style>
#p{cursor:pointer;}
</style>
</head>
<body>
<p id="p">Click me!</p>
</body>
</html>

Categories