/* this is our script for monopoly_first_page.html */
var result;
var button;
var image;
var x = 0;
function animation( animatedObject ){
var hereObject = animatedObject;
alert( hereObject );
/*setInterval( animate( animatedObject, x ), 100 );*/
}
function animate( hereObject, x ){
alert( x );
if( x == 0){
hereObject.style.width++;
}
else{
hereObject.style.width--;
}
if( hereObject.style.width <= 225 ){
x = 0;
}
if( hereObject.style.width >= 300 ){
x = 1;
}
}
function disanimation( animatedObject ){
var hereObject = animatedObject;
clearInterval();
}
window.onload = init;
function init(){
result = document.getElementById( "result" );
button = document.getElementById( "button-container" );
document.getElementById( "button-container" ).onmouseclick = animation( button );
document.getElementById( "button-container" ).onmouseout = disanimation( button );
alert( button );
alert( button );
}
hi every one...this is one of my source code and im a beginner...i faced a problem and it is where i wrote this statement:
document.getElementById( "button-container" ).onmouseclick = animation( button );
when function init begins to run function animation also execetues... but im sure im not rolling my mouse over the specified DIV...
what is the problem?
You need to pass a function to any handlers. What is happening with your code is that it calls animation(button) then sets that value to the onmouseclick property. Since the animation(...) function doesn't return a function, nothing beneficial will happen.
This would be a lot closer.
whatever.onmouseclick = animation;
If you need to, you could also do this: (assuming you want a specific button passed)
whatever.onmouseclick = function(e) { animation(button); }
just wanted to add to john, you can also do
document.getElementById( "button-container" ).addEventListener("click",function(){animation(button);},true);
insetead of "onmouseclick"
:-)
As #JohnFisher already mentioned, you assign the RESULT of your function to the event
However I only ever use onclick. Where did you get onmouseclick from?
Also you repeat your getElementById unnecessarily and have an init that is an onload so consolidate it:
window.onload = function() {
var button = document.getElementById( "button-container" );
// button is not necessarily known or the same at the time of the click so use (this)
button.onclick = function() { animation(this); }
button.onmouseout = function() { disanimation(this); }
}
Related
I have a jquery sorting plugin which works pretty fine, but if I make few dragging operations the mouseup event starts to be very slow. It takes about 1 second while it triggers the event. If I dump end of mousemove event it stops immediately but mouseup event starts after the second. I added the console.log() for every method in the code but there is no call between drag stop and mouseup. What could be the
problem? How can I debug possible parallel processes in the browser? The code looks like:
....
state.doc
.on( 'mousemove', dragging )
.on( 'mouseup', endDrag );
}
/**
* #desc Start dragging
* #param e event obj.
*/
function dragging( e )
{
...
console.log('dragging end');
}
function endDrag( e )
{
var cEl = state.cEl,
hintNode = $( '#sortableListsHint', state.rootEl.el ),
hintStyle = hint[0].style,
targetEl = null, // hintNode/placeholderNode
isHintTarget = false, // if cEl will be placed to the hintNode
hintWrapperNode = $( '#sortableListsHintWrapper' );
if ( hintStyle.display == 'block' && hintNode.length && state.isAllowed )
{
targetEl = hintNode;
isHintTarget = true;
}
else
{
targetEl = state.placeholderNode;
isHintTarget = false;
}
offset = targetEl.offset();
cEl.el.animate( { left: offset.left - state.cEl.mL, top: offset.top - state.cEl.mT }, 250,
function() // complete callback
{
tidyCurrEl( cEl );
targetEl.after( cEl.el[0] );
targetEl[0].style.display = 'none';
hintStyle.display = 'none';
// This has to be document node, not hint as a part of documentFragment.
hintNode.remove();
hintWrapperNode
.removeAttr( 'id' )
.removeClass( setting.hintWrapperClass );
if ( hintWrapperNode.length )
{
hintWrapperNode.prev( 'div' ).append( opener.clone( true ) );
}
var placeholderNode = state.placeholderNode;
// Directly removed placeholder looks bad. It jumps up if the hint is below.
if ( isHintTarget )
{
placeholderNode.slideUp( 150, function()
{
var placeholderParent = placeholderNode.parent();
var placeholderParentLi = ( ! placeholderParent.is( state.rootEl.el ) ) ? placeholderParent.closest( 'li' ) : null;
placeholderNode.remove();
tidyEmptyLists();
setting.onChange( cEl.el );
setting.complete( cEl.el ); // Have to be here cause is necessary to remove placeholder before complete call.
state.isDragged = false;
if( setting.maxLevels !== false ) // Has to be after placeholder remove.
{
recountLevels( cEl.el );
if( placeholderParentLi ) recountLevels( placeholderParentLi );
}
});
}
else
{
state.placeholderNode.remove();
tidyEmptyLists();
setting.complete( cEl.el );
state.isDragged = false;
}
} );
scrollStop( state );
state.doc
.unbind( "mousemove", dragging )
.unbind( "mouseup", endDrag );
}
....
Here https://camo.publicvm.com/ I made an example with dumps for all methods in the code. Look at the latency of endDragggggggggggggggggggggggggggggg log. Also I checked this issue in Opera browser and it has no problem with it.
EDIT: I think the problem was in local variables in the closure in animate call. var placeholderNode, var placeholderParent and var placeholderParentL. As I rewrite it to global state object problem is gone.
A classic user click triggers mousedown and mouseup.
The time between the two is usually somewhere ~50ms.
In that short period of time, the browser might be busy due to processes fired by mousedown and event bubbling and propagation, specially if you bound too much handlers far up in the DOM tree like to document or "html, body". Avoid that.
Also, mouseup might end up being never registered.
If some processes are taking too much time or you're simply too fast with your mouse, the mouseup might not be over the target element at the time it's triggered, therefore never firing that event.
I think the problem was in local variables in the closure in animate call. var placeholderNode, var placeholderParent and var placeholderParentL. As I rewrite it to global state object problem seem to be less visible. But I am not sure if this is the root of issue.
make it synchronous with the use of promise or async/await.
This link below contains documentation on async.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Can anyone resolve my problem with my code ( i just discovered it from debug mode )
<script type="text/javascript">
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close'),
// ...
</script>
This is not all of the code that I have, it's long so I just put the first lines of it.
In debug mode I get this error :
TypeError: morphSearch.querySelector(...) is null
Here is the generated markup: http://pastebin.com/P6tfvcZS
Is there a solution for this issue ?
found this...
var offsets = morphsearch.getBoundingClientRect();
morphSearch is the wrong case, I'm thinking it should be...
var offsets = morphSearch.getBoundingClientRect();
I also separated your var statements. The last one looked like this...
isOpen = isAnimating = false,
I don't think that's valid, try it like this.
var morphSearch = document.getElementById( 'morphsearch' );
var input = morphSearch.querySelector( 'input.morphsearch-input' );
var ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' );
var isOpen = false;
var isAnimating = false;
Those querySelector's appear to be working...
Actually, a side from the above, I think I found the only querySelector that wasn't working.
Try changing this...
morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
To...
morphSearch.querySelector( 'input.morphsearch-submit' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
All that should do it.
I get the error on the event handler for this.css, for some reason i cant assign those images to the background of the cell.
thank you!
$(document).ready(function(){
var turn = 0;
$("#cell11 , #cell12, #cell13, #cell21, #cell22, #cell23, #cell31, #cell32, #cell33 ")
.click(
function(){
// alert("click");
var cell = this;
if(turn=== 0){
cell.css("background", "url(images/o.png");
turn = 1 ;
}else{
cell.css("background", "url(images/x.png");
turn = 0;
}
}
);
});
You need to instantiate the jQuery class on this:
var cell = $(this);
Also, fix the typo as mentioned in comments:
if( turn === 0){
cell.css("background", "url(images/o.png)");
turn = 1 ;
}
else {
cell.css("background", "url(images/x.png)");
turn = 0;
}
Adds listener
for ( i = 0; i < kbButtons.length; i++ ) {
kbButtons[i].addEventListener("click", function() { clickKbButton( this ); }, false);
}
Should remove listener
function clickKbButton ( elem ) {
elem.removeEventListener("click", function() { clickKbButton( this ); }, false);
elem.id = "invis"
}
Everything is working fine, no errors in console, button click works but it's not being removed after I click it
As per documentation, my guess is that event handler should reference the same function:
for ( i = 0; i < kbButtons.length; i++ ) {
kbButtons[i].addEventListener("click", clickKbButton, false);
}
function clickKbButton ( ev ) {
this.removeEventListener("click", clickKbButton, false);
this.id = "invis"
}
Simple fiddle example
I guess you should use a variable reference to the function() { clickKbButton(this); }, the two functions in your addEventListener & removeEventListener are actually two different functions.
var handler = function() { clickKbButton(this) };
then use this handler variable when you add & remove listener.
Here is my code (simplified):
function FillTable ( oProfile_data ) {
var oTable = document.getElementById ( "table" );
for ( var key in oProfile_data ) {
var oRow = oTable.insertRow ( oTable.rows.length );
var oCell = oRow.insertCell ( 0 );
var oLink = document.createElement ( "a" );
oLink.href = "javascript:void(0)";
oLink.innerHTML = "Visit Homepage";
oLink.addEventListener ( "click",
function () {
var win = window.open ( oProfile_data [key]["url"], "_blank" );
win.focus();
}, false );
oCell.appendChild ( oLink );
}
}
The problem is that every row has a link to the same document and I can't figure out why!
My temporary solution is:
oLink.href = "javascript:void(0); var win = window.open ( \"" + oProfile_data [key]["url"] + "\", \"_blank\" ); win.focus();";
Which works fine.
I suppose it is an event overriding problem but I may be wrong.
Any help would be really appreciated!
This is a problem that can be solved through an understanding of closures. Your anonymous function (bound to the click event) doesn't get called until the user clicks on the link, and when this line gets executed:
var win = window.open ( oProfile_data [key]["url"], "_blank" );
The value of key will be enclosed by the FillTable function. So, it will retain the value that it had when the function ended (ie, the last value it held in the loop).
You'll have to create a new closure for each iteration of the loop. Something like:
oLink.addEventListener ("click",
(function (k) {
return function () {
var win = window.open ( oProfile_data [k]["url"], "_blank" );
win.focus();
}
}
)(key), false);
Above, we create a function that returns a function that opens your window. Then, we pass the value of key into that function, thus creating a new closure.