I am new to javascript. I try counting the number of clicking times by using closure.
The code is to show how many times the user clicks on the button, but it shows nothing after clicks.
html body code:
<button id="clickme">Click me!</button>
<div id="message"></div>
js code:
window.onload = function () {
var button = document.getElementById("clickme");
button.onclick = handleClick;
};
function handleClick() {
var count = 0;
var msg = "You clicked me ";
var div = document.getElementById("message");
function clicker() {
count++;
div.innerHTML = msg + count + " times.";
}
return clicker;
}
In order to make onclick to use the clicker function returned by the function handleClick, you should invoke the handleClick function.
This type of pattern is also called IIFE (Immediately-Invoked Function Expression).
window.onload = function () {
var button = document.getElementById("clickme");
button.onclick = handleClick();
};
Related
I have one problem. addEventListener only works with the last element of the loop. I know what is the problem, but I can't figure it out. I get the JSON object from another function with the information. Later on the left side there should be clickable pictures. After clicking it I should get the same picture on the right side showed. Still it works only with the last one.
function myFunction(obj) {
var listItems = document.getElementsByClassName("newimg");
for (var i = 0; i < obj.length; i++) {
(function (i) {
document.getElementById("imgSmall").innerHTML += `<br></br><img id="${i}" class="newimg" src=${obj[i].download_url} >`;
let p = obj[i];
listItems[i].addEventListener('click', function() { makeithappen(p);},true);
}(i));
//obj[i].width,obj[i].height,obj[i].author,obj[i].download_url>
}
}
function makeithappen(k) {
document.getElementById("imgLarge").innerHTML = `<br class="text"> AUTHOR: ${k.author}, WIDTH: ${k.width}, HEIGHT: ${k.height}</br><img class="img2" src=${k.download_url} >`;
}
For quick fix.
Replace in your code
listItems[i].addEventListener('click', function() { makeithappen(p);},true);
with
listItems[i].onload = function() {
listItems[i].addEventListener('click', function () { makeithappen(p); }, true);
}
So when you got your listItems you weren't finished with the creation of more images. So new image means new list.
for (let i = 0; i < obj.length; i++) {
document.getElementById("imgSmall").innerHTML += `<br></br><img id="${i}" class="newimg" src=${obj[i].download_url}>`;
const listItems = document.getElementsByClassName("newimg");
listItems[i].addEventListener('click', function () { makeithappen(p); }, true);
}
function makeithappen(k) {
document.getElementById("imgLarge").innerHTML = `<br class="text"> AUTHOR: ${k.author}, WIDTH: ${k.width}, HEIGHT: ${k.height}</br><img class="img2" src=${k.download_url} >`;
}
Pleas do refactor <br></br> into something with css, margin or padding or whatever. This will then allow you to create the images with let div = document.createElement('img') and bind the event listener directly div.addEventlistener(...)
using following script, tweet window opens up but tweet event is not getting called. How can I bind
window.open to tweet window:
var TWTShare = function() {
var title = metadata.title,
url = metadata.url,
text = metadata.text,
href = "https://twitter.com/intent/tweet?url="+encodeURIComponent(url)+"&title="+encodeURIComponent(title)+"&text="+encodeURIComponent(text);
window.open(href, 'share it on twitter', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
}
twttr.events.bind('tweet', function (event) {
console.log('tweet');
});
i have created a dynamic jquery split button listview on a clickable button whose structure is something like this:
var Book="Book Item"
var data="hi";
//Create the listview if not created
if(!listCreated){
$("#content").append("<ul id='list' data-role='listview' data-inset='true'></ul>");
listCreated = true;
$("#content").trigger("create");
}
$("#list").append("<li data-theme='d'>"+"<a id='list_content' data-rel='popup' data-position-to='window' data-transition='pop'>"+data+"</a>"+"<a id='list_content_checkout' data-rel='popup' data-position-to='window' data-transition='pop'></a>"+"</li>");
$("#list").listview("refresh");
$("#list_content").click(function(){
alert();//
});
in given below line data is a variable whose value i want on list view click.
$("#list").append("<li data-theme='d'>"+"<a id='list_content' data-rel='popup' data-position-to='window' data-transition='pop'>"+data+"</a>"+"<a id='list_content_checkout' data-rel='popup' data-position-to='window' data-transition='pop'></a>"+"</li>");
when we click on ANKUR listview data, in alert ankur should come.
sorry for my english.
thanks
$(document).ready(function () {
Getdata();
});
function Getdata() {
var htmlcontent = "";
var strord_key = "1234";
htmlcontent += "<li data-role='list-divider'><br>";
htmlcontent += "<a href='javascript:void(0);' onclick= goToNext('" + strord_key + "') >Order Ticket: " + strord_key + "</a> </li>";
$("#result-listview").empty();
$('#result-listview').append(htmlcontent);
}
function goToNext(value) {
alert(value);
}
I want to open a new window, configured with height and width, all while using < h:commandLink >
<h:commandLink id="zyzid" value="click me" action="#{test.testDo}" target="_blank" />
this renders into:
<a onclick="mojarra.jsfcljs(document.getElementById('myForm'),{'myForm:xyzid':'myForm:xyzid'},'_blank');return false" href="#" id="myForm:xyzid">click me</a>
I looked at jsfcljs() function. It submits the form with target="_blank", but i don't see window.open() anywhere. So, how would I be able to alter this code to change new window's height and width?
for reference:
mojarra.jsfcljs = function jsfcljs(f, pvp, t) {
mojarra.apf(f, pvp);
var ft = f.target;
if (t) {
f.target = t;
}
f.submit();
f.target = ft;
mojarra.dpf(f);
};
I found a few relevant links, and this and I arrived at this solution, which seems to work for me. h:commandLink opens a new page, and I get to manipulate it's width and height. This involves slightly modifying/overwriting the mojarra.jsfcljs function. It opens a window with standard window.open() (triggered by onclick) and associates the form it is submitting with that window.
$(window).load(function(){
mojarra.jsfcljs = function jsfcljs(f, pvp, t) {
mojarra.apf(f, pvp);
var ft = f.target;
if (t) {
if (t.indexOf('options') != -1){
f.target = '_blank' + new Date().getTime();
var options = t.substring(t.indexOf('optionts') + 9);
window.open('', f.target, options);
}
else{
f.target = t;
}
}
f.submit();
f.target = ft;
mojarra.dpf(f);
};
});
markup:
< h:commandLink id="viewLink" action="#{testBean.doTest}" value="h:commandLink" target="options:height=200, width=300" />
Newbie-question I suppose.
The following code is part of a function that I call on document ready. It is intended to permanently return the values of the current mouse position whenever the mouse is moved.
The odd thing that is happening: Moving the mouse on document ready doesn't log anything to the console. I know the mouse_monitor-function works though because I use this function in another "mousedown"-eventlistener and it then logs the current mouse-position to the console.
//Mouse Monitor
canvas.addEventListener('mousemove', mouse_monitor, false);
//Mouse Monitor Request
var mouse = new Array();
var mouse_monitor = function(e) {
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
mouse.x = e.pageX - offsetX;
mouse.y = e.pageY - offsetY;
return mouse;
console.log(mouse);
}
return mouse;
Any statements after that line won't be executed.
Okay, then get something working and add to it/modify it incrementally:
var mouse_monitor = function(e) {
var x = e.pageX;
var y = e.pageY;
console.log(x, y);
}
window.onload = function() {
this.addEventListener('mousemove', mouse_monitor);
}
But you mentioned "document ready", so if you are using jquery you should avoid using addEventListener() because it's not cross browser:
var mouse_monitor = function(e) {
var x = e.pageX;
var y = e.pageY;
console.log(x, y);
}
$(document).ready( function() {
$(this).on('mousemove', mouse_monitor);
});
Another approach is to console.log() all variables and their values leading up to the failed code to determine which values are not as they should be.