I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});
Related
I don't know how to click on a button that has no id or value.
I've already tried using the xpath and selector paths but neither worked for me.
<div class="button js-vehicle-section-next full-width mb1">Next Step: Select a Repair</div>
Is the code for the button on the site. My current attempts are.
find('js-vehicle-section-next').click
click_on('js-vehicle-section-next')
find_all(:xpath, "//*[normalize-space(text())='Next Step: Select a Repair'").first.click
The expected result is that the button will be clicked
click_on clicks link or button elements so it’s not going to work here because you are trying to click a div. Instead you can just use a valid CSS selector and call click on the returned element
find(‘.button.js-vehicle-section-next’).click
If you didn't have a specific class for the next "button" and you needed to do it by the contained text you could do
find('div.button', exact_text: 'Next Step: Select a Repair').click
I'm trying to create a color picker and have run into a massive issue. Say for example I want to click on a div behind some text to change it's color, I won't be able to do this because the text will override the bg. What can I do here to make it so I can click the element without including the dom box that all elements have?
By running stopPropagation() it will only select the clicked element.
$(".ColorCardBackgroundView").click(function(e) {
e.stopPropagation();
document.getElementById('ColorCardBackground').jscolor.show();
});
I'm using x-editable to inline edit some text. As long as I click on the label directly everything works fine. But, if I implement a button and want label to be edited on button click, then it won't work.
The reason being, clicking the label edits it and clicking anywhere outside label resets it. Here, when I click the button, its considered as a click outside and editable-label doesn't edit.
What to do? I don't want to go with setTimeout().
The following lines did the trick
I gave the Button a ID ("inline_editable_button")
jQuery("inline_editable_button").click(function(e){
e.stopPropagation();
jQuery('#editable_id').editable('toggle');
});
Here is a JSfiddle link to the script I am working with:
http://jsfiddle.net/TSM_mac/bnjWQ/
To use it, you first click the button and then on the element you want to modify.
As you notice, when you click the button to apply it to the div, the property is disabled and you can't just click on other objects. I want to be able to click the button, and apply it to any object without having to reclick the button.
The original code I wrote was not as tidy as this code, but a very helpful person wrote this for me to fix a problem I was having... I can't seem to enable this feature.
Just delete or comment out the line setting currentInput to null in the div.editable click handler and the if statement in the css property input click handlers. http://jsfiddle.net/bnjWQ/2/
I have a <button> element which adds an element to my page when clicked.
What I'd like to do is to have an <input> inside this button, in which I could input a number, and then on button click, it would add x times the element instead of clicking x times on the <button>
See demo here : http://jsfiddle.net/MWxgb/5
The problem is that I can't click inside the <input> element inside the button, it clicks the button instead.
Is there a way to avoid this behavior ?
Just prevent the clicks on the <input> from bubbling:
$("#count")
.click(function(e) {
e.stopPropagation();
});
http://jsfiddle.net/qT7gC/
http://jsfiddle.net/3vtTv/2/
I changed the button to a div, but still use $("#btn").button() to style it.
Then I call stopPropagation on the click event for the #count click handler.
This seems to work (in IE9, Chrome 10, FF4), but unfortunately the button still flashes when you click the textbox. Not sure how to work around that.
Odd idea, I doubt that would work. I would recommend just using a text input, and setting up some javascript to read a click/enter key pressed.
Refer to this question
Here is an example