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>
Related
I have a script which calls and displays the users phone number to them on a header. That works great. However, I am needing to change text on the page that I can't edit directly. There is a phone number that I am needing to replace with the same ID as the header.
Help me change the href 800 number and the span 800 number with jQuery please! I'm stuck!
The code below is hard coded and I don't have access to change it. So it must be done dynamically.
<div class="flex-item flex-item-nogrow navbar-icon" id="navbarPhoneNumber">
<a href="tel:8005555555" class="flex-wrapper align-items-center navbar-icon-link">
<i class="fa fa-phone" aria-hidden="true"></i> <span>(800) 555-5555</span> </a>
</div>
I have tried this
$("#navbarPhoneNumber a").html("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");
It didn't work.
$("#navbarPhoneNumber a").replaceWith("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");
Try This
var $phoneNumberA = jQuery('#navbarPhoneNumber a');
var $phoneNumber = jQuery('#navbarPhoneNumber span');
$phoneNumberA.attr('href', $phoneNumberA.attr('href').replace(/(tel:...)/, 'tel:123'));
$phoneNumber.text($phoneNumber.text().replace(/\(.*\)/, '123'));
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>
I'm trying to create a function in JavaScript, which on the button click changes class and adds a green checkmark, which is the icon tag in html.
I tried this:
function markerValg(btnID) {
knap = document.getElementById(btnID);
knap.classList.remove("unselected");
knap.classList.add("selected");
document.getElementById(btnID).innerHTML = += <i class="fa fa-check ikon"></i>
Change the last line of code to
document.getElementById('test').innerHTML = '<i class="fa fa-check ikon"></i>';
<button id='test'>Check</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>
I have this button:
<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"></i> Save</button>
And then through jQuery I change the text dynamically based on user selection on a select element. See the code:
if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
$("#btnGuardarPaso1").removeClass("btn-primary").text("Edit");
} else {
$("#btnGuardarPaso1").addClass("btn-primary").text("Save");
}
But, this code has a problem: the <i class="fa fa-save"></i> element is also removed/changed and I'll like to maintain it. How I can fix this?
Also since the button has a FontAwesome icon, can I change it dynamically too? For example fa-save will change for fa-edit and viceversa depending on the choice by user
You can place a span tag inside of the button and set the text of the span rather than the button. The italics would then be outside of the span.
<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"><span id="textItem"></span></i> Save</button>
if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
$("#btnGuardarPaso1").removeClass("btn-primary");
$("#textItem").text("Edit");
} else {
$("#btnGuardarPaso1").addClass("btn-primary");
$("#textItem").text("Save");
}
[edit] also if you use jQuery to look up the italic tag (either directly by ID or by traversing the DOM) you can definitely set the class using:
$(this).attr('class','classname');