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 8 years ago.
Improve this question
I want to add a transparent input text field in the centre of DIV #mainC each time the button is clicked.
JsFiddle
I tried doing this with jquery but did not succeed.
use append():
$("#abc").click(function() {
$("#main").append('<input type="text" />');
});
demo: http://jsfiddle.net/6nkd5/5/
Well there's multiple things wrong with your code:
You use the same ID multiple times (ID's can only be used once, classes can be used multiple times).
Calling a function from a external JavaScript source will result in the function not running.
You're trying to use jQuery when jQuery is not loaded
$('<input type="aText" id="aText">').appendTo('#main') is not a valid jQuery, instead try to use: $('#main').append('<input type="text" id="aText">');
aText is not a valid input type attribute value
There is no library selected at the upper left corner in jsfiddle. Try to select jquery there.
Use append() and try not to specify onclick inline. You can register the event with jQuery when document is ready. Registering methods this way is preferred because you separate logic from your HTML (Check unobtrusive javascript).
This is how you would do it preferably:
$('#abc').on('click', function(){
$('#mainC').append('<input type="aText" id="aText">')
})
Check also jsfiddle
The problem you had with your jsFiddle was also that no jQuery script was selected.
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 5 years ago.
Improve this question
I have several buttons with a class mybtn. I need to set a class mybtn-active on the one that is clicked, and remove it from the one that has it at the moment.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
When I click on a button, currently active loses its class, as it should. But the clicked one doesn't get the class.
I passed through the script with Chrome debugger and it works. It just loses the class when the code exits the script. Any ideas?
[SOLUTION] by #musefan
The buttons were <a> tags in the background, which I didn't think about because this is the code I inherited, I didn't write the HTML. And that was the problem. See the accepted answer.
Assumptions
I am going to take a massive gamble here, but it's the only thing I can think of that would explain what the OP is describing and could actually happen with that code. We would need the OP to provide HTML to validate my assumption.
I am also assuming that the class selector in the sample code is a typo of the question, and is not a problem in the original code (as the OP specifically says the removal of the classes is working correctly).
My assumptions have since been validated by the OP in comments on this answer and other answers.
Problem
I expect your problem is that you are using either a elements and your click is actually reloading the page, or using buttons that are also having the same effect, thus causing all classes to revert to default.
Solution
You can fix this by using the arguments of the click event as follows:
$('.mybtn').on('click', function (e) {
e.preventDefault(); // This prevent the hyperlink from reloading the page.
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
You are missing a
.
in the selector on your second line.
It should be
$('.mybtn-active').removeClass('mybtn-active');
As I have mentioned in the comment, it is typo mistake. You have to change $('mybtn-active') to $('.mybtn-active'). Look at the snippet.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
.mybtn-active {
font-size:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybtn">Button1</button>
<button class="mybtn">Button2</button>
<button class="mybtn">Button3</button>
<button class="mybtn">Button4</button>
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
I have button with id = btnadd And java script file “myscript” which is referenced in layout page.
I want this function to fire on button click but this doesn’t happen. Could anybody tell me what is the error here?
View script like this:
myscript java script file like this:
Use this code instead:
$(document).on("click", "#btnaddd", function() {
alert("click");
});
If it still does not work then you might have used the same ID btnadd for two different elements and JQUERY only matches the first one.
Maybe multiple elementes with de same id, you can see this code at jsfiddle.
$(document).ready(function() {
$('#mybt').click(function(){
alert('s')
})
});
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 6 years ago.
Improve this question
Hello there am trying to make an image gallery for example lets say that I have multiple images and I want to change their opacity when I hover over them by using JavaScript I know that this is possible with CSS but am trying to accomplish this with JavaScript I tried using get Elements By Tag Name method but the problem it just can access one element by time so can I do that thanks
Try this:
var elements = document.getElementsByTagName("img");
Array.prototype.forEach.call(elements, function (e) {
// Here you can access each image individually as 'e'.
});
When you hover, get the ID of that image. Then loop through all images (example above) and set their opacity. If the element is equal to the one you clicked on (remember, you just took the ID so you can use it), just skip to the next one using continue;.
you have to collect you image elements like
var images = document.getElementsByTagName("img");
then you have to do like
Array.prototype.forEach.call(images, e => e.addEventListener("mouseover", function( event ) { do something}));
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 a page that I added to a project that was already underway, and when I added the masterpage, it was given a whole bunch of scripts. Among these scripts is something that is messing with the styles on my page.
There are several different bugs, but the two biggest things are
It moves my placeholder text into external spans, and these spans are all positioned wrong.
It is adding a keypress function to my searchbar that goes to the wrong place.
The thing is, it looks like I have about 20 scripts on the page thanks to the masterpage, so I don't know where to even start putting breakpoints.
Is there any simple way I can find out which scripts are responsible for doing these weird things? Does anyone know of a specific script that would cause that placeholder text issue?
If you haven't tried out the break on dom attribute modification in chrome dev tools or don't have chrome installed. or it might be an IE specific Then you could do it with plain javascript by monkey patching the setter method with object.defineProperty
If it is using setAttribute("placeholder", "") or removeAttribute("placeholder") try monkey patching that one instead.
here is an example:
// select the target node
var target = document.querySelector('input');
// change the setter method
Object.defineProperty(target, 'placeholder', {
set: function(newValue) {
// log the code that made the change
throw (new Error()).stack;
}
});
function updateDom() {
changeInput();
}
function changeInput() {
target.placeholder = ""
}
setTimeout(updateDom, 100);
<input id="input" type="text" placeholder="foo">
if that doesn't help cuz it's a deep minified jQuery hook that doesn't trace back to your code, than you only choice is to "cut and trace"
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Why is this simple onclick JavaScript function not called in JSFiddle ?
HTML:
<input type="button" value="Check" id="zeCheck" onclick="check();" />
JS:
function check() {
alert('ech');
}
DEMO
It doesn't work because you are defining this function in wrong place...
Put your script function in .js file or at the end of document in
<script></script> tags.
Check this fiddle
Take it out from the onload event and it will work. Put it in the body. (left panel)
onLoad in JS FIDDLE is the same as window.onload=function() in JavaScript .
No wrap - in is the same as
<head><script type="text/javascript"> //your
//code goes here</script</head>
So you just have to change it to NO wrap to body.
The function is being defined inside a load handler and thus is in a different scope. You can fix this by explicitly defining it on the window object. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with with or without a framework or using a different framework, if you like.