I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});
Related
I haven't used jQuery since a long time, and I have forget a lot of things in it.
I tried to change the element text when an element clicked but it didn't work, I don't know why.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("h1").click(() => {
console.log("event trigered");
$(this).text("this element is clicked");
});
</script>
</body>
</html>
You can do something like this. where you send the event with the click and then get the target, that is clicked, and then you can edit the content of that with .text()
$("h1").click(event => {
const clickedElement = $(event.target);
console.log("event trigered");
clickedElement.text("this element is clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>practice test1</h1>
<h1>practice test2</h1>
<h1>practice test3</h1>
<h1>practice test4</h1>
Have you tried using html() function instead of text()?
Also, you can check this StackOverflow page, if you'll still have problems with it: How to change a text with jQuery
The answer to this might be quite easy but I couldn't find a solution since everything seems ok. I'm trying to create a google chrome extension and it has a button like this,
document.getElementById("autof").addEventListener("click", autofill());
function autofill() {
console.log("ENTER");
document.getElementsByName("session[username_or_email]").value = "sylent";
document.getElementsByName("session[password]").value = "abcdefg";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TWITTER</h1>
<button id="autof">Fill</button>
<script src="twt.js"></script>
</body>
</html>
When you add the event listener to the button, you should pass in the function without actually calling it.
document.getElementById("autof").addEventListener("click", autofill);
Using parenthesis with autofill(), you are assigning the result of calling your function to the click handler:
document.getElementById("autof").addEventListener("click", autofill());
Try this:
document.getElementById("autof").addEventListener("click", autofill);
I have an .outerdiv in which dynamically html elements are added through script.
Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.
Here goes glitch link which i have tried
UPDATE
One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js.
UPDATE
As per suggestions i included my alert inside document.ready still not working
> this is a script.js code which i don't have control, i cant edit this.
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
The issue is with script's defer attribute:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:
<script src="/script.js"></script>
You can place the alert after the appending the link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js"></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
$(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
});
</script>
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You can try this:
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
alert($(".outdiv a").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
// alert($(".outdiv a").text());
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load.
So just put the alert in the document ready block.
You may use the alert function inside document ready in your dynamic files
$(document).ready(function(){
alert($(".outdiv a").text());
});
Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.
On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:
$(".outdiv").on('click', 'a', function() {
console.log('clicked');
// You can extract the text of the clicked anchor here
console.log($(this).text());
});
Use holdReady
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js"
alert($(".outdiv a").text());
$.holdReady( false );
});
});
$(document).ready(function(){
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script>
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {
alert($(".outdiv a").text());
$.holdReady( false );
});
});
</script>
</body>
</html>
I'm new to jQuery and jQuery mobile. I'm trying to understand how to execute a function when a button is clicked. I've tried the methods I've seen in tutorials, but it isn't working for me. Here's my code. I get the 'document is ready' alert, but don't get an alert when the button is clicked. I've also tried it with the .click() outside of the ready function. If anyone can find what I'm doing wrong, it will be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function() {
alert('document is ready');
$('#testButton').click(function() {
alert('testButton has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Test Button
</div>
</div>
</body>
</html>
Remove the # from the id value in your a tag. # is a jQuery selecter which species its an ID. Change this line
Test Button
TO:
Test Button
Replace:
Test Button
with:
Test Button
The id shouldn't have the "#".
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});