Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I need to be able to use javascript/jquery to update a field. But I need to be able to check whether the input was updated manually by the user or if the input was dynamically updated using a document.getElementById().value.
onChange() method seems to execute no matter if the user modified the control, or if I dynamically updated the control.
Any help? Is there something similar to onChange() that only executes when a user manually types/edits a control?
You can manually edit the .value of an input element, and as long as the element was not focussed by the user, an onChange event is not fired by most browsers.
OnKeyUp / OnKeyPress might be the event you are looking fo.
From MDN:
The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.
Also, see this link onchange event not fire when the change come from another function
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
So from my understanding of event listeners is that the action only applies to the element that you used the event listener on.
But say that I wanted to listen for a click on one element that is in a separate div, but the element I want to apply certain actions on is in a separate div. What would be the best way if possible in doing so?
To help visualize, im looking at this users example.
https://ryannathanwilson.github.io/Rock_Paper_Scissors/
And so from what it looks like it listens for a click on any of the buttons, and then the clicked button shows up in another area and then performs a specific action. Is this possible? Or am I understanding his code incorrectly and the elements that appear at the bottom when clicked is the original element?
You can write a function like this:
function myfunc(){
document.getElementById("abcd").value = "Lorem Ipsum";
}
And call this function on the element you want to listen on:
<button onclick=myfunc()>Click me! </button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a slider that when you press left or right key arrow, the carroussel moves to the prev or next image.
Is it possible that if i click a div or a link or something it does the same as if i was pressing one of the arrow keys?
Thanks!
Usually you can perform the same action that are triggered by Keyboard Events with clicks on elements like div. I recommend the onclick function. Basically you add an eventlistener to the div and trigger a function that manipulates the slider.
Take a look at this question. You can trigger the Keydown event on one element from another event. So if you click a div you can fire the keydown event of another element.
Definitive way to trigger keypress events with jQuery
If you made a slider before try to use owl
https://owlcarousel2.github.io/OwlCarousel2/
it is easy to use and work with I use owl in my projects that needed a slider or carousel
because it takes a lot of time to make a flexible carousel
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
When you click "save" on a form , 2 jquery events I know get triggered. Actually I was using both but just today I realised one is enough :) . But still let's say you define both, which one would be triggered first. $("#btnSaveForm").click() or $("#btnSaveForm").submit()
What I also noticed as soon as a click handler is triggered, the GUI basically freezes as long as this click handler is completely executed(Even if there is a ajax call done inside the handler). But still the GUI remembers what you did and executes the clicks afterwards.
The order of which things are executed is as follows :
User clicks the submit button
The onclick function is executed
The browser submits the page to the url specified in the action of
the form
As you can see in this example, the button triggers first and the form triggers right after.
Maybe you are using sync ajax handler if you are experiencing Frozen GUI after submitting your form.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This seems to be impossible with the typical "inspect element" approach, which seems great for HTML and CSS, but that's it. I can't go to a particular element and then link to the particular JavaScript that's controlling it. Is there any way to do this?
As someone else said, there is no precise notion of "the JS controlling an element". There is JS which does something to an element, and there is JS which handles an event on a element. To handle these cases:
In Chrome devtools, select the element, right-click, and select Break on.... This will break when something happens to the element, such as a change in its children or its attributes, and leave you on the line that was making the modification.
Use "Event Listener Breakpoints" and choose to break on a particular event. Then initiate that event on an element which is listening for it, such as by clicking on the element. The debugger will take you to the line handling that event (which might be deep within jQuery, but that's another story).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm creating a project and for it to be faster, I have chosen not to use jQuery(I would use only 5% of the full potential of the library).
In this project, I have a <textarea> element, and need to get the contents every time it changes. I have tried different examples, but none worked.
How do I write the following code using Vanilla JavaScript and native DOM Events?
$("#textarea").bind('input propertychange')
// or
$("#textarea").bind('change')
jQuery .change() is an alias for native change event.
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
You can use it fairly simple:
// Non-obtrusive JavaScript example(preffered).
element.addEventListener('change', callback, false);
// Somewhat obtrusive (not recommended).
element.onchange = function () { ... };
// Obtrusive JavaScript in HTML (not recommended).
<input type="text" onchange="function() { ... };">
Here's the plain vanilla js way to change content in the DOM.
document.getElementById("textarea").innerHTML = put your new HTML here
Also you probably want to pick a better id than textarea as that's awfully generic.