I am trying to change the text of a button when clicked and back to normal when clicked again. The button is using a font awesome icon so figured I would try using this.html instead of this.text, but for some reason it is not recognising the HTML I am indicating?
If I change the HTML on the else statement then it will change on click which is what makes me think it is an issue with it not recognizing my HTML.
I know it might be something really stupid but cant seem to figure it out.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
{
$(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
} else {
$(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
}
})
});
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
onclick="retrieveData()"
>View code <i class="fas fa-chevron-right fa-xs"></i></button>
</div>
It seems as if the only change is the text ( "View || Close ") so you can simply put that variable text in spans - one with a display: none styling and then on the click - toggle the visibility of each.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
$(this).find('span').toggle();
})
});
#submitbutton span:nth-of-type(2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
>
<span>View</span>
<span>Close</span>
code <i class="fas fa-chevron-right fa-xs"></i>
</button>
</div>
Related
A demo of my dilemma here
Let's say I have the following html:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="main" id="thingSection">
<h1>
Test Header
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content1">
Some content
</div>
</div>
<hr />
<div class="main" id="thingSection1">
<h1>
Another Test
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content2">
Some content
</div>
</div>
<hr>
<div class="main" id="thingSection2">
<h1>
Another test, you say?
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content3">
Some content
</div>
</div>
</body>
</html>
I am using the following jquery to change the toggle icon from FontAwesome from off to on:
$(function() {
$('.btn-icon').click(function() {
if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
$("i.fa-toggle-off").toggleClass('fa-toggle-on');
} else {
$("i.fa-toggle-on").toggleClass('fa-toggle-off');
}
});
});
When I click the button to toggle the icon, it works as expected, i.e. it changes all of the buttons on the page. However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.
I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section. That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.
I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.
I'm a novice with jquery. I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.
EDIT: I've accomplished (partially) what I want to do with the following code:
$(function() {
$('.btn-icon').click(function() {
var t = $(this).find('.is-toggle');
if (t.hasClass('fa-toggle-off')) {
t.addClass('fa-toggle-on');
t.removeClass('fa-toggle-off');
}
else {
t.addClass('fa-toggle-off');
t.removeClass('fa-toggle-on');
}
});
});
Looks like I just didn't understand what exactly $(this) was (:
All you need is $(this) that selects the element that triggered the event. From there you can select down to the div you want.
EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it
$(function() {
$('.btn-icon').click(function() {
$(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
});
});
I have a Javascript function that prints "like" and "Unlike" like this:
$(".liketoggle").click(function () {
$(this).text(function(i, v){
return v === 'Like' ? 'Unlike' : 'Like'
})
});
I have an HTML tag that shows a heart in an tag as:
<i class="fas fa-heart"></i>
How can I show the heart icon next to the like/unlike button. This is the HTML so far:
<button type="submit"
class="btn btn-custom btn-sm liketoggle"
name ="like">Like
</button>
<i class="fas fa-heart"></i>
How I can write to the JS to be included when toggling it?
Similar Function here: http://jsfiddle.net/dFZyv/ but same issue
I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
I want that when you click + the click and scroll will be disabled on the page.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
Here is my style sheet
.overlay-is-navbar-collapse {
overflow: hidden;
pointer-events: none;
}
Here is my JS file :
(function ($) {
$('#dropdown-menu-action').on('show.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hide.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
UPDATE
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
In your JavaScript file, Add a click handler to toggle the body class name overlay-is-navbar-collapse
(function ($) {
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
And remove pointer-events: none from your CSS file, or you won't be able to click on the button again, once you have added the class name overlay-is-navbar-collapse.
.overlay-is-navbar-collapse {
overflow: hidden;
}
You could add a class to the body to disable scroll or edit the style directly on whatever axis you want, or all axis. body.class { overflow-y: hidden; }
Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?
Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".
Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML
You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>