Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 4 months ago.
Improve this question
I am trying to detect when a <select> element that was dynamically added has had its option changed. However, it does not trigger when I change it.
The code:
var diP = document.createElement("select");
diP.add(option);
diP.add(option2);
diP.addEventListener("change", alert("Test"));
div2.appendChild(diP);
The code does not alert anything when I change the option.
You need to pass callback as argument to event listener, among with event type.
diP.addEventListener("change", () => alert("Test"));
Also, please check if you've selected HTML element div2 correctly.
HTML:
<div class="div2"> ... </div>
JS:
const div2 = document.querySelector('.div2')
For addEventListener's, you need to pass the name of the function, not call the function. Or you can pass it an anonymous function.
function funcName(){
}
diP.addEventListener("change", funcName);
or
diP.addEventListener("change", function(){
console.log(this.value)
});
I assume that instead you see one alert when your script executes for the first time because instead of passing a function to the addEventListener you call it.
In order to have alert shown when input changes, you need to pass a function which runs in response to the change event. So your code should look like this:
....
diP.addEventListener("change", () => alert("Test"));
...
This way you say "run a function which will make an alert each time input changes".
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
Okay, so on my webpage I am trying to update the text within a div contained within these span elements.
<div class="output-1-2-1-1">
<p id="yourNameDisplay">Person</p>
</div>
<div class="output-1-2-1-2">
<p>Born in <span id="yourMonthDisplay">February</span></p>
</div>
My current method of doing this is as follows. Input is registered from textboxes using these statements in a function after a button is clicked. I have checked and the id "yourMonth" does match the input box, so that's not the issue.
var yourMonth = document.getElementById("yourMonth").value;
And then the variable is then displayed by calling the element ID in the same function below.
document.getElementById("yourMonthDisplay").innerHTML = yourMonth;
But for some reason, the variables aren't showing up in the text after the button is clicked. I have checked to make sure that they are there using a completely separate div in another location and they pop up there fine. I called them and displayed them using the same method and they work fine, as follows:
document.getElementById("output5").innerHTML = yourMonth;
Is there an alternate method you could recommend for displaying these variables that is better?
You are using innerHTML to put pure text in a span tag. Should work, but perhaps try innerText instead.
document.getElementById("output5").innerText = yourMonth;
(as mentioned before in the comments, its good to provide more context in your original question)
your event is triggert after click on the button? if yes, then you get the value from the input field. can you catch the value from the input field? if yes then you can put the new value inside the span tag with the selector yourMonthDisplay and not output5. you have the wrong selector.
and the code will work.
function swapMonth() {
let yourMonth = document.getElementById("yourMonth").value;
document.getElementById("yourMonthDisplay").innerHTML = yourMonth;
}
<input id="yourMonth">
<button onclick="swapMonth(this)">swap</button>
<div class="output-1-2-1-1">
<p id="yourNameDisplay">Person</p>
</div>
<div class="output-1-2-1-2">
<p>Born in <span id="yourMonthDisplay">February</span></p>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
})
.b {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>
When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
1) The code(Change Event) that is not working is:
$(document).on('change','select[name="id"]',function(){
alert('Not Working');
});
2) The code(Change Event) that is working is:
$(document).on('change',$('select[name="id"]'),function(){
alert('Working');
// Here $(this).val() not working for get value.I want to use $('select[name="id"]').val()
});
Doubts:
a) Why Is First change event not working?
b) Second change Event is Working, But $(this).val() is not working.
Can you please explain the difference between above 2 functions?
In order to handle select element change:
$('select[name="id"]').on('change',function(){
alert($(this).val());
});
For dynamically created elements use:
$(document).on('change','select[name="id"]',function(e){
alert($(e.target).val());
});
As you see, in that case e.target.val() should be used ( e.target wrapped into $() in order to get it as a jquery object )
I'm not sure why your first example doesn't work as I think it should, however the second example will have this scoped to document instead of the select.
The following will scope this to the select.
$('select[name="id"]').on('change', function (){
$(this).val()
});
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 8 years ago.
Improve this question
I have an a tag inside of a form that is used to remove uploaded files. I don't want the a tag to take the user to another section of the page, or try to submit the form or anything like that, I only want it to run a javascript function. How can I accomplish this? I'm not sure what to put in the href?
You can use #:
function doSomething() {
alert('test');
}
Click me
Really, any URL can go there - the return false; short-circuits the default behaviour of the link.
In general, if at all possible, it's best to use a real URL that does the same thing your JS does, for users who have JS disable. This is called "graceful degradation".
You really need to add more code and examples to your questions in the future. Fortunately I know what you're actually asking.
In the function that runs when you click the link, you want to prevent its default behavior.
Here's a very simple example:
<a href="http://google.com" id="myanchor">
Javascript
document.querySelector('#myanchor').addEventListener('click', function (ev) {
ev.preventDefault();
// your code here.
});
<form>
<!-- other inputs-->
<input type='button' onclick='run()' />
</form>
Then for the Javascript:
function run() {
//do something
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I call a js function so it work on click image?
$("#closeButton").click(function () {
$("#sheet").css("display", "none");
});
image code?
<img src="images/divclose.png" alt="*" onclick="function()"/>
Add an ID (remove your onclick thingy):
<img src="images/divclose.png" alt="*" id="closeButton" />
Write this (note that you don't need the outer function anymore if you already have it);
$(function () {
$("#closeButton").click(function () {
$("#sheet").css("display", "none");
});
});
Now, go reading a beginner tutorial, a book or whatever. Learn the basics ;)
You try to access the image using an id in your code, but you don't have any id on the image element. Just add that, and it will work (provided that you have your code inside the ready or load event, so that the element exists when it runs):
<img src="images/divclose.png" alt="*" id="closeButton"/>
Don't have any onclick attribute on the element if you want to bind the event using jQuery. The event model is somewhat different for jQuery, and may conflict with plain DOM events.
tag must have the "id" and you can use the same method you described
I assume you want to use jquery so you should check jquery documentation.
What you did is declaring an "oldschool" pure javascript way to call "function()" on the click.
Therefor you need to declare the function "function" in the javascript itself the old fashioned way.
Using jquery and your code all you need is to assign your id to your image.
<img src ="foo.png" id="closeButton"/>
and it should work.