This question already has answers here:
Listening for variable changes in JavaScript
(29 answers)
Listener for property value changes in a Javascript object
(8 answers)
Closed 7 years ago.
There's a third-party js-code, which changes my inputs values like this:
some_third_party_func = function() {
my_input.value = some_val;
};
I want to track all the changes of my_input.value somehow. Modifying a third-party js is the thing I want to avoid. Probably, events can be useful, but which one? The oninput event looks acceptable, except for handling only keyboard input because of some mysterious reasons.
my_input.oninput = function() { alert("my_input.oninput"); };
// ^^ alert() runs only when inputting from the keyboard
Here you can try the issue (how it looks for me).
Is there any method to do this (with jQuery, maybe)?
Related
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
Closed 3 years ago.
I'm trying to do something simple, there are 3 checkboxes and when I click on one I want the rest of them to be deselected. I also want to use a methods that I wrote for this purpose to be used on click.
when I do
myCheckBox.onclick = myMethod();
it runs only once when page loads and generally is not working properly
but when I do
myCheckBox.onclick = function(){
myMethod();
};
everything works as intended. Why does it work like this?
You need to do
myCheckBox.onclick = myMethod;
To assign the method to the event.
When you run myMethod() it would apply whatever myMethod returns to the onclick event listener
You'll want to use:
myCheckBox.onclick = myMethod;
This question already has answers here:
JavaScript: Overriding alert()
(12 answers)
Closed 4 years ago.
Is it possible to change the alert() function to log the message instead of showing up a popup?
Some outside team members does like the use the alert function, but we don't want it because they aren't removing them.
So I want to add some code in our angular application that logs the message in the console instead of popping up.
So, I want some code which don't require to change all the calls to alert() but a kind of hook to that function which transforms it to console.log()
Try this
window.alert = window.console.log
window.alert('Hello from console.log')
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
addEventListener calls the function without me even asking it to
(5 answers)
Closed 5 years ago.
What i am trying to id attach addEventListener() to all the input fields so that every time a keyup event is activated so alert messages pop up for every input field
var inputs = document.querySelectorAll(".form-control");
for(var i=0;i<inputs.length;i++){
elem = inputs[i]
elem.addEventListener("keyup",alert(i))
}
this code does not work. it only works on page load. it only loops it one time
What actually happens in the line elem.addEventListener("keyup",alert(i)) is that the function-call alert(i) is executed and the return value of that function call is then added as an event listener. This obviously doesn't make sense, because 1. alert doesn't return anything and 2. you only want to execute it when the event happens.
What you actually seem to want to do is bind the function-call alert(i) itself to the event listener, not its return value.
You could assign the alert-function to the keyup event using elem.addEventListener("keyup",alert). But in that case you can't pass any arguments to it. If you want to do this, you can use Function.bind to create a new function from a function and a list of arguments.
elem.addEventListener("keyup", alert.bind(null, i))
If you need to support old browsers which do not support bind yet, this is an alternative syntax which generates an anonymous function as an event handler:
elem.addEventListener("keyup", function() {
alert(i);
})
There is, however, another issue with your code. Every event handler will have the same value for i. Check the question mentioned by Sterling Archer's comment on the question for a solution.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 8 years ago.
I just came across this by accident and I want to check if this is actually supposed to happen.
I have a div in my page with id box. In my Javascript I set a style to a variable named box: box.style.webkitTransform = "yadda yadda".
I thought that box was in scope, declared as var box = document.getElementById('box');, but it is not (the declaration is in another function!). Neither is there a var box defined globally or in any other place.
However the style got assigned just fine. So somehow the elements' id can be used globally in Javascript? Convenient, but I'm afraid to use it. I assume if the name is used for an actual variable it will override this behavior.
Some browsers add 'named elements' as properties of the document or windowobject. See this SO-question, especially the excellent answers from bobince
This question already has an answer here:
Call native javascript function that has been "erased" by the web page
(1 answer)
Closed 4 years ago.
If I reset window.alert to be some other function, is there any way for me to restore it w/o first "saving" it?
For example:
window.alert = function() { };
After doing that, is there a way of restoring window.alert() to what it used to be? (btw: asking this only for "predefined" DHTML objects - not for random js objects)
You can use delete:
window.alert = function() { };
delete window.alert;
Here's a working example.