am trying to make this icon as button but it doesn't work
//icons buttons
let bookmark='<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
let bookmarkbutton= document.getElementById("bookmarkbutton");
//bookmark on click function
bookmarkbutton.onclick=function() {
console.log("the button works");
}
here is the link to repository https://github.com/yaminecy/html
You have to first insert the "button" into the DOM. Then you can select it.
let bookmark = '<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
document.body.innerHTML+=bookmark;
let bookmarkbutton = document.getElementById("bookmarkbutton");
bookmarkbutton.onclick = function() {
console.log("the button works");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
just use jquery
$(document).append($('<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>'););
$('#bookmarkbutton').off('click');
$('#bookmarkbutton').on('click', (event)=>{
console.log("the button works");
});
In addition to having to enter the html before using onclick, I suggest you use:
addEventListener instead of onclick
cursor:pointer; css, so you can simulate button
//icons buttons
let bookmark = '<a id="bookmarkbutton"><i id="bookmark" class="fas fa-bookmark fa-3x"></i></a>';
document.body.innerHTML += bookmark;
let bookmarkbutton = document.getElementById("bookmarkbutton");
//bookmark on click function
bookmarkbutton.addEventListener('click', () => {
console.log("the button works");
});
i {
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
Related
I want to change the Button' value with a font awesome spinning animation icon on click.
HTML:
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="button_g" type="button" class="button-default" value="Go" onclick="abc(this);">
Script:
function abc(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.value ='<i class="fa fa-spinner fa-spin"></i>';
}
This one only replaces the Button's value with a non-working html code. I tried it with:
document.getElementById('button_g').innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
But doesn't work. Please advise.
Instead of input you should use button and set innerHTML of button
function abc(this1) {
this1.disabled = true;
this1.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
}
button {
padding: .25rem .75rem;
border: 1px solid #3d3a37;
border-radius: 6px
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="button_g" class="button-default" onclick="abc(this);"> Go </button>
The value attribute has a different meaning for each type of the input tag. Yours is a button and so the value attribute is linked to the text inside the button, not the inner html of it.
If you want to change the inner html, use this1.innerHtml
For more read here
Hello I want that when I click on YouTube icon it take me to Google.com but it don't I'm using JavaScript in this
HTML
<div class="yt" >
<i class="fab fa-youtube fa-3x" onclick="youtube()" id="yt" ></i>
</div>
Js
function youtube() {
document.getElementById("yt").window.location.href = "www.google.com";
}
Replace the code in your youtube function with this: window.location.assign("https://www.youtube.com")
The window.location.assign() method loads a new document
If it still doesn't work, make sure that your JavaScript, if in a separate file, is properly imported.
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
document.getElementById("yt").addEventListener('click', () => window.open('https://google.com'))
and make sure the javascript is executed after the element is in the DOM.
or just:
<i class="fab fa-youtube fa-3x" id="yt"></i>
Simply embed event listener to you icon ,
once clicking set location.href = "http://www.google.com";
See below ssnipt :
window.addEventListener("DOMContentLoaded", (event) => {
document.getElementById("yt").addEventListener("click", function(e) {
location.href = "https://stackoverflow.com/";
})
})
.fab {
color: red;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<i class="fab fa-youtube fa-3x" id="yt"></i>
using jquery :
$(function(){
$("#yt").on("click", function() {
location.href = "https://stackoverflow.com/"
})
})
.fab {
color:red;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<i class="fab fa-youtube fa-3x" id="yt"></i>
I am trying to learn javascript and trying to toggle between the empty circle icon and the circle with check mark when the icon is clicked. However, it does not seem to be working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<head>
</head>
<body>
<i class="far fa-circle" id="toggle"></i>
<script>
document.addEventListener('click', (event) =>{
if(event.target.id == 'toggle'){
document.getElementById('toggle').classList.toggle("fas fa-check-circle");
}
});
</script>
</body>
</html>
Sometimes it's more helpful to define your element default CSS and than use a is-* class modifier - than doing funky stuff with fas classes. Take a look:
const EL_tog = document.querySelector('#toggle');
EL_tog.addEventListener('click', () => {
EL_tog.classList.toggle("is-active");
});
#toggle:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
font-style: normal;
}
#toggle.is-active:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<i id="toggle"></i>
Tomorrow, even if you decide to use another icons-set, you don't need to change the HTML, just your CSS. Which is after all - all what's about.
If you wonder where I got that hex values for CSS content: like \f111 - not a big deal
An idea is to use the stacking icons and you can deal with only one class:
var icon = document.getElementById('toggle');
icon.addEventListener('click', (event) => {
icon.querySelector(':last-child').classList.toggle("fa-check-circle");
});
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<span class="fa-stack fa-2x" id="toggle">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version -->
</span>
Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
We can solve this using vanilla JavaScript.
Just add an onclick listener to the toggle element. Then replace the class fa-circle with fa-check-circle.
const circle = 'fa-circle'
const check = 'fa-check-circle'
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle(circle)
toggler.classList.toggle(check)
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>
Another way is using css just define a new class (i.e. active) with the pseudo attribute before like this:
#toggle.active::before {
content: '\f058';
}
Now, we add an onclick event to the toggle element to add or remove the active class:
toggle.onclick = () => {
toggler.classList.toggle('active')
}
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle('active')
}
#toggle.active::before {
content: '\f058';
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>
I made a text field.
getting value from text field and displaying on a button.
-. Problem : i. when click a button so dynamically one button field should generate with remove option and that value should display on that input/button field.
ii. the button should generate upto 5 time max.
here is my code.
$(document).ready(function() {
var $button = $('#display_here').on('click', function() {
$("#added_value_1") = $(this).text();
});
$('#myvaluefirst').on('input', function(e) {
$button.text($(this).val());
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome</title>
<link rel="stylesheet" href="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" name="myvaluefirst" id="myvaluefirst">
<button type="button" id="display_here" name="display_here">value will display here</button><br>
<!-- This button should generate dynamically max 5 time whenever above button has been click.
and this button should display whenever text has been pass or not after the above button clicked. -->
<button type="button" id="added_value_1" name="added_value_1">Your value is</button>
<button type="button" id="remove_this_1" name="remove_this_1">Remove</button>
problem is: whenever 'value will display here' button clicked then one button should dynamically generate with remove option & value of that button max 5 time only.
The below code gives you a dynamically filled button that on click generates a clone of itself along with a remove button.
$(document).ready(function() {
addFillValueListener();
addGenerateButtonListener();
});
function addFillValueListener() {
const button = document.getElementById('generateButtons');
document.getElementById('myValueFirst').addEventListener('keyup', function () {
button.value = this.value;
});
}
function addGenerateButtonListener() {
const button = $('#generateButtons').get(0);
button.addEventListener('click', function () {
const remainingButtons = +button.getAttribute('data-remainingButtons');
if(remainingButtons > 0) {
button.setAttribute('data-remainingButtons', remainingButtons-1);
cloneAndAppendDynamicButton(button, remainingButtons);
generateAndAppendRemoveButton(remainingButtons);
}
remainingButtons == 0 && console.log('Maximum buttons reached');
});
}
function cloneAndAppendDynamicButton(button, i) {
const clonedNode = button.cloneNode(),
div = $('#dynamicButtonsDiv').get(0);
clonedNode.id = 'dynamicButton' + i;
clonedNode.setAttribute('data-occurance', i);
div.appendChild(clonedNode);
}
function generateAndAppendRemoveButton(i) {
const rem = document.createElement('input'),
div = $('#dynamicButtonsDiv').get(0);
rem.type = 'button';
rem.value = 'Remove';
rem.setAttribute('data-occurance', i);
rem.id = 'removeButton' + i;
rem.addEventListener('click', removeOccurance);
div.appendChild(rem);
}
function removeOccurance() {
const occurance = this.getAttribute('data-occurance');
$('#dynamicButtonsDiv > [data-occurance="'+ occurance +'"]').remove();
}
#dynamicButtonsDiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
}
#dynamicButtonsDiv > * {
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="myValueFirst" id="myValueFirst">
<input type="button" id="generateButtons" data-remainingButtons="5" value="Dynamic">
<div id="dynamicButtonsDiv"></div>
i am new to css and jquery. I want to fill the color in icon. For example , Like instagram's heart icon (when double tapped it is filled with red color).
I am using font awesome for the same. so i am able to get the heart icon but i can not fill the color the way i want. I tried to change background-color property but it does not work either.
The thing is, when user clicks on the heart icon, it should be filled with the red color. Can you guide me please?
My html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>
all.js file is the file i downloaded for icons.
What should i use instead of font awesome, if this does not work out?
Why would you reinvent the weel? You don't need to manage this with your own styles.
In fact FontAwesome gives you different classes for each icon, for example for the fa-heart icon you can use fa-heart for a filled heart and fa-heart-o for an empty one.
So just use a jQuery code that toggles these two classes on click event of your icon:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
Demo:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-heart" id="heart"></i>
You can add a css class to the element to style it's appearance. In my example I added click listener to the element and just toggled CSS clas.
JS code:
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
Example Link:
https://codepen.io/bojandevic/pen/mxKZqK
You need add onlick function in the icon, and create a function to change te color of this.
<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>
And your js should be like:
function changeColor()
{
var icon = document.getElementById('heart');
icon.style.color = "red";
}
Using jquery toggleClass you can add or remove classes from each element in the elements like this.
$("#heart").on("click", function() {
$(this).toggleClass('oldColor', 'newColor');
});
.newColor {
color: red;
}
.oldColor {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart oldColor" id="heart">Heart</i> </div>
</body>
</html>
you can use onclick attribute like this:
<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>
and in your script area or file define a function like this:
function changeColor() {
document.getElementById("heart").style.color = "red"; }