when used in external main.js (see content below), only the "ready!!" text shows up. But when used inline without referencing the main.js (see below too) both "ready!!" and "clicked!!" text are displayed. Any idea why did I miss here ?
page content case 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
</head>
<body>
<button class="purchase-test" type="button"></button>
<script type='text/javascript' src='http://mywpblog.com/wp-content/plugins/mytestplugin/assets/js/main.js?ver=3.0.1'></script>
</body>
</html>
page content case 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type='text/javascript' src='http://mywpblog.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
</head>
<body>
<button class="purchase-test" type="button"></button>
<script>
JQuery(document).ready(function() {
console.log("ready!!"); // WOKRS FINE
JQuery('.purchase-test').click(function(e) {
console.log("clicked!!"); // WOKRS FINE AS WELL
});
});
</script>
</body>
</html>
main.js
JQuery(document).ready(function() {
console.log("ready!!"); // WOKRS FINE
JQuery('.purchase-test').click(function(e) {
console.log("clicked!!"); // DOES NOT WORK
});
});
$(function() {
$('.purchase-test').on("click", function(event) {
// If '.purchase-test' is a link:
// A Link
// You must preventDefault
event.preventDefault()
// Log to console
console.log("Clicking Purchase test");
});
$('.non-purchase-test').on("click", function(event) {
console.log("Clicking Non Purchase Test");
});
$(".purchase-test-button").on("click", function(event) {
console.log("Clicking on Button");
});
});
https://jsfiddle.net/cpcmn41z/1/
Related
This text is a link. How do I put this into the copy buffer (e.g. via navigator.clipboard.writeText()) so that when the user pastes it somewhere else it retains the link text as well as the link itself?
Thanks in advance!
When u use addEventListener, you can extract all information from the event.
<!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>Test page</title>
</head>
<body>
<a class="link" href="https://stackoverflow.com/">Stackoverflow</a>
<script>
const linkComponent = document.querySelector('.link');
linkComponent.addEventListener('click', (event) => {
event.preventDefault(); // This will prevent the default action (going to link)
navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
});
</script>
</body>
</html>
I use ClipboardJs, it work for gmail or other email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
test link
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
let clipboard = new ClipboardJS(".btn", {})
.on("success", function () {
console.log('success')
})
.on("error", function () {
console.log('error')
});
</script>
</body>
</html>
problem: the page executes the javascript onclick propertise before get clicked.
here is my code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<script>
var x = document.getElementById("demo");
x.onclick = alert("clicked");
</script>
</body>
</html>
solution: when I change the line x.onclick = alert("clicked");
to
x.onclick = function() {alert("clicked")};
It works.
I want to understand the reason behind this behavior of onclick.
The reason for that behaviour is, that you simply make a function call and when the JavaScript interpreter comes to that line it will be directly executed. You need to implement a reference to a function or a function definition itself to avoid this (as you did in your solution).
x.onclick = myMethod() // NOT working due to directly execution
x.onclick = () => myMethod() // working
x.onclick = myMethod // working
x.onclick = function() { myMethod() } // working
I f you write the code this way also works same
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var x;
x.onclick = alert("clicked");
</script>
</body>
</html>
SO your code not understand where you try to send this alert so automatically display
so that's not a good way If you try to display alert when clicked on text then do this method
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo" >Hello world!</h1>
<script>
document.getElementById('demo').onclick = function(){
alert("clicked");
}
</script>
</body>
</html>
My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
I have some code,when I click the button it show me some message.It works on IE good,but dont works on ff or chrome,somebody tell why?Sorry for my poor english.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function(){
$("#test").bind("input propertychange",function(){
alert("abc");
});
});
function ff()
{
document.getElementById('test').value=Math.random();
</script>
</head>
<body>
<input id="test"></input>
<input id='btn' value="tt" type="button" onclick="ff()" />
</body>
</html>
First off, you're missing the closing bracket for the ff function. Secondly the event you should be listening for on the input field is the "change" event, that too only fires off when the text field has focus and you change its value and then click elsewhere in the document (i.e. it loses focus or is blurred) then the change event is fired.
What you can do instead is either listen for other events such as keyup etc. or trigger a custom change event. Here's the modified/corrected code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#test').on('change', function() {
alert("abc");
});
$('#btn').on('click', function() {
$('#test').val(Math.random()).trigger('change');
});
});
</script>
</head>
<body>
<input id="test" value="" />
<input id="btn" value="tt" type="button" />
</body>
</html>
And try to keep away from inline javascript calls such as "onclick= ..." in HTML. Whole point is to separate JS, CSS and HTML.
There are some errors in the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function () {
$('#btn').on('click', function () {
$('#test').val(Math.random());
$('#test').trigger('change');
}); //missing ending }
$('#test').bind("change paste keyup", function () { // change to a proper listener
alert("abc");
});
});
</script>
</head>
<body>
<input id="test" type="text" value="" />
<!-- ^ Specify a "type" -->
<input id='btn' value="tt" type="button" />
</body>
</html>