I am trying to execute code when the onmuseout/onload events occur, but for some reason my code is not running??
function outFunction() {
document.getElementById("mouseout").alert("Don't Leave!")
}
function myFunction() {
document.getElementById("hi").innerHTML = "This DIV is loaded."
}
<div onmouseout="outFunction()" , id="mouseout">DIV</div>
<div id="hi" onload="myFunction()"></div>
outFunction:
The alert function is on window (or the implicit global object). It is not on the returned div element (which is an instance of HTMLDivElement).
Change your function to this:
function outFunction() {
window.alert("Don't Leave!")
}
Note that this also works (the same alert function is being used, because window is the global object):
function outFunction() {
alert("Don't Leave!")
}
myFunction:
onload is not defined on HTMLDivElement. You should use document.addEventListener( 'DOMContentLoaded', handler ) instead.
Change your HTML and JavaScript function to this:
<div id="hi"></div>
function myFunction() {
document.getElementById("hi").innerHTML = "This DIV is loaded."
}
document.addEventListener( 'DOMContentLoaded', myFunction ); // Do NOT put parentheses! i.e. don't put `myFunction()`, just put `myFunction` - because you're passing a function-reference, not a function-call.
Related
I would like to disable a certain function from running as an onclick event.
Here, I would like to disable myfunc1, not myfunc2. Actually I want to disable myfunc1 from the whole page, but anyway this is the only thing that I need.
I have no control over the page and I am using userscript or other script injection tools to achieve this.
What I've tried:
Redefining the function after the page has loaded: I've tried adding an event listener to an event DOMContentLoaded with function(){ myfunc1 = function(){}; }
This seems to be working, but in a fast computer with fast internet connection, sometimes it runs before the myfunc1 is defined (in an external js file that is synchronously loaded). Is there any way that I can guarantee that the function will be executed after myfunc1 is defined?
Is there any way that I can 'hijack' the onclick event to remove myfunc1 by its name?
You should use event listeners, and then you would be able to remove one with removeEventListener. If you can't alter the HTML source you will need something dirty like
function myfunc1() {
console.log('myfunc1');
}
function myfunc2() {
console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
a.setAttribute('onclick', 'myfunc2();');
Click me
Or maybe you prefer hijacking the function instead of the event handler:
function myfunc1() {
console.log('myfunc1');
}
function myfunc2() {
console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
var myfunc1_;
a.parentNode.addEventListener('click', function(e) { // Hijack
if(a.contains(e.target)) {
myfunc1_ = window.myfunc1;
window.myfunc1 = function(){};
}
}, true);
a.addEventListener('click', function(e) { // Restore
window.myfunc1 = myfunc1_;
myfunc1_ = undefined;
});
Click me
Another way this could be done is using Jquery and setting the onlick propery on the anchor tag to null. Then you could attach a click function with just myfunc2() attached.
$(document).ready(function () {
$("a").prop("onclick", null);
$("a").click(function(){
myfunc2();
});
});
function myfunc1() {
console.log('1');
}
function myfunc2() {
console.log('2');
}
<a class="test" href="#" onclick="myfunc1();myfunc2();">Example</a>
You can see the codepen here - http://codepen.io/anon/pen/BLBYpO
Perhaps you are into jQuery.
$(document).ready(function(){
var $btn = $('button[onclick*="funcOne()"]');
$btn.each(function(){
var newBtnClickAttr;
var $this = $(this);
var btnClickAttr = $this.attr("onclick");
newBtnClickAttr = btnClickAttr.replace(/funcOne\(\)\;/g, "");
$this.attr("onclick", newBtnClickAttr);
});
});
Where in the variable $btn gets all the button element with an onclick attribute that contains funcOne().
In your case, this would be the function you would like to remove on the attribute e.g., myfunc1();.
Now that you have selected all of the elements with that onclick function.
Loop them and get there current attribute value and remove the function name by replacing it with an empty string.
Now that you have the value which does not contain the function name that you have replace, you can now update the onclick attribute value with the value of newBtnClickAttr.
Check this Sample Fiddle
I am supposed to use Jquery to call a function that changes a div's visibility using css. This is my JQUERY
alert("Interactive on line");
function changeView(page)
{
alert("Handler for click() called. ");
if(page === 'home)
{
$('#HomeTab'.css(display=='none'));
}
}
$('#HomeTab').on('click', { page:'home'}, changeView());
I used the alert statement inside the changeView to see if changeView ever gets called and it does not. The initial alert before the changeView function does get called, so the script is linked correctly.
Thank you in advance!
Refer .on( events [, selector ] [, data ], handler )
(a) You are invoking/calling function, not assigning it as handler, Remove () after function name.
(b) data object could be accessed using event.data.KEY
(c) Also correct the typo while using .css method, it is jQueryElement.css(PROPERTY,VALUE)
function changeView(e) {
alert("Handler for click() called. ");
if (e.data.page === 'home') {
$('#HomeTab').css('display', 'none');
//OR $('#HomeTab').hide();
}
}
$('#HomeTab').on('click', {
page: 'home'
}, changeView);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='HomeTab'>Home Tab</div>
I've got a simple question, the code below keeps firing the alert when the page loads, but the alert is in a click event so I don't know why. Any ideas?
<script>
$(document).ready(
function () {
var blah = document.getElementById('btnChangeScreenSize');
var blah2 = $('#btnChangeScreenSize');
$('#btnChangeScreenSize').click(alert(1));
}
);
</script>
Thanks,
write it like this:
$(document).ready(
function () {
var blah = document.getElementById('btnChangeScreenSize');
var blah2 = $('#btnChangeScreenSize');
$('#btnChangeScreenSize').click(function() { alert(1) });
}
);
The thing is, when you write: $('#btnChangeScreenSize').click(alert(1)) the function alert() is being called and returns undefined. Then you're setting undefined as a callback function, which doesn't make sense
You have this code:
$('#btnChangeScreenSize').click(alert(1));
That attempts to set alert(1) as the click handler (see the docs), but alert(1) is evaluated immediately. Instead, you need a callback function, like this:
$('#btnChangeScreenSize').click(
function () {
alert(1)
}
);
i try to pass paramater to function. When i click the div it will alert the paramater that i pass
i have 2 file
index.html
script.js
here's what i try
Example 1
index.html
<div id="thediv" >
script.js
window.onload = initialize;
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = myFunction(" something ");
}
//end of bind
//function
function myFunction(parameter) { alert( parameter ) };
//end of all function
the trouble is the function its executed without click
Example 2
index.html
<div id="thediv" onclick="myfunction('something')" >
script.js
function myFunction(parameter) { alert( parameter ) };
yap its done with this but the trouble if i have many element in index.html it will painful to read which element have which listener
i want to separate my code into 3 section (similiar with example1)
the view(html element)
the element have which listener
the function
what should i do? or can i do this?
(i don't want to use another library)
Placing () (with any number of arguments in it) will call a function. The return value (undefined in this case) will then be assigned as the event handler.
If you want to assign a function, then you need to pass the function itself.
...onclick = myFunction;
If you want to give it arguments when it is called, then the easiest way is to create a new function and assign that.
...onclick = function () {
myFunction("arguments");
};
Your first solution logic is absolutely ok .. just need to assign a delegate ... what you are doing is calling the function .. So do something like this ...
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = function () { myFunction(" something "); };
}
//end of bind
Instead of assign you invoke a function with myFunction();
Use it like this
//bind event listener
function initialize(){
document.getElementById("thediv").onclick = function(){
myFunction(" something ");
}
}
I have a function in html:
<script>
function update_x(obj) {
...
}
</script>
and I call it on click in html with onclick="update_x(this)" (inside of <div class="aaa">).
How can be the same achieved in jquery? I've tried some stuff, like:
$('.aaa').click(update_x);
});
and
$('.aaa').click(function () {
$(this).update_x(1, false);
});
neither won't work...
This would be equivalent:
$('.aaa').click(function () {
update_x(this);
});
But you don't need to use that. Just change your function to
function update_x(event_obj) {
// 'this' will be the clicked object automatically
// plus, you have further info in the event object
}
$('.aaa').click(update_x);
Make sure $('.aaa').click(update_x) is called after the element with class "aaa" exists in the DOM. You can wrap that code in a document.ready handler, or use event delegation.