i am facing a problem with event add event listener function it don't give an error it is just not working i even listened to videos copied and pasted other codes to work and modify my html to work with but it add event listener doesn't work here is my code bellow
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<script type="text/javascript" src="checkthisout.js">
y = document.getElementById("input").addEventListener("click", myFunction);
if(y){
function myFunction() {
alert("hello world")
}
}
</script>
<input holder="password" value="replace here" id="input"/>
</body>
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body onload="init()">
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<input holder="password" value="replace here" id="input"/>
<script type="text/javascript">
function init() {
document.getElementById("input").addEventListener("click", myFunction);
}
function myFunction() {
alert("hello world")
}
</script>
</body>
Here is the solution.
You have to wait that the DOM has been loaded before manipulate it.
Moreover you can't have src attribute in this script tag.
Your script is running before the input is generated so it's probably not finding it. Try putting the script at the end or use Jquery's document.ready function.
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<input holder="password" value="replace here" id="input"/>
<script type="text/javascript" src="checkthisout.js">
function myFunction() {
alert("hello world")
}
document.getElementById("input").addEventListener("click", myFunction);
</script>
</body>
Your order of html and scripts matters and also you cant have function defined inside if(y){}, because that function defination scope is under 'if' which is not available to addEventListner level. Try this:
<input holder="password" value="replace here" id="input1"/>
<script>
y = document.getElementById("input1").addEventListener("click", myFunction, false);
function myFunction() {
alert("hello world")
}
</script>
Related
I need jQuery autocomplete for a project but it doesn't work for me.
I don't know where is my mistake.
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
<form>
<input type="text" id="recherche" />
</form>
</body>
</html>
You have multiple issues with html syntax here:
Move the script tags for jquery files to the head tag
move your script to after the body
Your script must be after the body tag or it can be placed instead of the head tag and use a document ready check to allow it to run after the page loads (see http://learn.jquery.com/using-jquery-core/document-ready/). Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="recherche" />
</form>
</body>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
</html>
see a working example here https://jsfiddle.net/q7k28bp0/1/
I made a HTML page with a button, that displays a message saying: "This is a message". Everything looks fine, but when I press the button don't get a message. I checked for any mistakes, but I couldn't find anything. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>Testing JavaScript</title>
<link rel="stylesheet" type="css" href="Button.css">
</head>
<body>
<h1>Javascript</h1>
<p>I am testing JS on this page.<br/>
This is a button.</p>
<script>
var message = "This is a message";
function popUp()
{
alert(message);
}
</script>
<button type="button" onclick="press()">Press me!</button>
</body>
</html>
You should call to onclick="popUp()"
Instead of onclick="press()":
onclick="popUp()"
You dont have a function named as "press()" declared, change the code
<!DOCTYPE html>
<html>
<head>
<title>Testing JavaScript</title>
<link rel="stylesheet" type="css" href="Button.css">
</head>
<body>
<h1>Javascript</h1>
<p>I am testing JS on this page.<br/>
This is a button.</p>
<script>
var message = "This is a message";
function popUp()
{
alert(message);
}
</script>
<button type="button" onclick="popUp()">Press me!</button>
</body>
</html>
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.
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>
I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
css:
#menu{
width:15px;
height:200px;
background:red;
}
jquery:
$('#menu').hover(function(){
$("#menu").stop().animate({width : "300px"});
});
It seems like problem lies here:
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Your animate.js goes before jquery loads
You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.
Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.
I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
</script>
</body>
</html>
In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.
Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="animate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hover(function () {
$("#menu").stop().animate({ width: "300px" });
});
});
</script>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
It is also important to note the sequence of the JavaScript elements.