Develop Reference

i want to create clicked face is marked and other faces are default color on second click

I have a feed back section where once a face is clicked it is marked with a specific color and other faces are defaulted to a second color in case the user click on another face (if he changes his mind).
function feedback(tab_number) {
document.getElementById('feedback-' + tab_number).classList.add('clicked');
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>

Your question is not very clear, but I think you might mean something like:
function feedback(tab_number) {
let clicked = document.querySelector("i.clicked");
if (clicked) {
clicked.classList.remove("clicked");
}
document.getElementById("feedback-" + tab_number).classList.add("clicked");
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>
So, when you click on a different face, the previous highlighted face gets their clicked class removed from their class list and it gets added to the new clicked face's class list.

You can do it by checking if the element.classList.contains('clicked'). If it does, then it has already been clicked and then you need to remove the class clicked, otherwise add it.
See below:
Note: I've edited it further to provide functionality for removing and adding class clicked to other faces automatically.
function feedback(tab_number) {
let clickedElem = document.getElementById('feedback-' + tab_number);
let add = false;
if( !clickedElem.classList.contains('clicked') ) {
add = true;
}
let elems = document.querySelectorAll(".feedback i");
elems.forEach(function(el) {
let currTabNum = el.id.substr(9, el.id.length); // get the tab number
if(add && currTabNum <= tab_number) {
document.getElementById('feedback-' + currTabNum).classList.add('clicked');
} else if(!add && currTabNum >= tab_number) {
document.getElementById('feedback-' + currTabNum).classList.remove('clicked');
}
});
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>
Note:

Check this out:
function feedback(tab_number){
document.getElementById('feedback-1').classList.remove('clicked');
document.getElementById('feedback-2').classList.remove('clicked');
document.getElementById('feedback-3').classList.remove('clicked');
document.getElementById('feedback-4').classList.remove('clicked');
document.getElementById('feedback-' + tab_number).classList.add('clicked');
}

First, you need to know where you're going wrong:
You are dynamically fetching a HTMLElement by id, based on the value passed as the tab to your function. So when that element is fetched, you decorate it with a class clicked. The moment you click a different icon with a different tab number, the class clicked is not removed from the previous click. So Your DOM still has the class added based on the previous clicks.
I would approach this solution by doing the following.
// Get all Clickable Elements
var clickableElements = document.querySelectorAll('.clickable');
// Create a function that clears current state of the rating
function clearAllRatings(){
// Loop through each clickable rating and clear it's clicked class decoration
clickableElements.forEach(function(element)
{
element.classList.remove('clicked');
});
}
// Loop through each element
clickableElements.forEach(function(eachElement){
// Add Click event to each element
eachElement.addEventListener('click', function(event){
// clear current rating
clearAllRatings();
// creat new rating
event.target.classList.add('clicked');
});
});
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="feedback">
<i class="fas fa-angry fa-5x clickable" id="feedback-1"></i>
<i class="fas fa-frown-open fa-5x clickable " id="feedback-2"></i>
<i class="fas fa-smile fa-5x clickable " id="feedback-3"></i>
<i class="fas fa-grin-stars fa-5x clickable " id="feedback-4"></i>
</div>

Toggle changed button class

I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked.
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off"></i></button>
I create the javascript below, however it changed the button style="display:none" instead change its class.
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
$("#change").toggle(function()
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
}, function() {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});

There you go, I used toggleClass (http://api.jquery.com/toggleclass/) function to toggle the class when you click your button, it'll disabled this class fa-toggle-off and activate this class fa-toggle-on on click
(https://api.jquery.com/click/) and vice versa.
$(document).ready(function(){
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-off fa-toggle-on");
});
});
.fa-toggle-off {
background-color: #F00;
}
.fa-toggle-on {
background-color: #0F0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn">
Button <i id="change" class="fa fa-toggle-off">AAA</i>
</button>
Beware, in your code you're checking if #change is clicked, the button got #btn ID attribute.
Wish I helped you.

You can use .toggleClass to add or remove class alternatively
$(document).ready(function() {
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-on");
});
});
.fa-toggle-off {
color: red;
}
.fa-toggle-on {
color: blue;
}
.btn-default {
display: block;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off">Hello my button</i></button>

You can check if on/off class exist and then can remove existing class & add new class as below code:
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
if ($("#change").hasClass("fa-toggle-off"))
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
} else {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
Hope it helps you.

Show and hide divs with JS

I have 5 <a>...
<a id="showtrips">TRIPS</a>
<a id="showeats">EATS</a>
<a id="showfilms">FILMS</a>
<a id="showmusic">MUSIC</a>
<a id="showtravels">TRAVELS</a>
...and I have 5 <div> and each div have the content of the <a> names. I want show all <a> and show only a <div>, so I want click on a <a> and hide the others divs showing only the selected div.
I'm searching and searching but I can´t find this exactly I found similar things but impossible to integrate to this problem.
This are the divs tags
<div id="trips">Content Trips</div>
<div id="eats">Content Eats</div>
<div id="films">Content Films</div>
<div id="music">Content Music</div>
<div id="travels">Content Travels</div>
#trips{ display: block };
#eats{ display: none };
#films{ display: none };
#music{ display: none };
#travels{ display: none };

This should do it, though this hides all divs on click, apart from the div matching the a tag. I'd suggest adding something to identify the divs to show/hide. This only requires vanilla js.
const test = document
.querySelectorAll('[id*="show"]')
.forEach(element => element.onclick = () => {
document
.querySelectorAll('div')
.forEach(element => {
element.style.display = 'none';
});
const divIdToShow = element.id.replace('show', '');
const divElementToShow = document.getElementById(divIdToShow);
divElementToShow.style.display = 'block';
});
console.log(test)
#trips {
display: block;
}
#eats {
display: none;
}
#films {
display: none;
}
#music {
display: none;
}
#travels {
display: none;
}
<a id="showtrips">TRIPS</a>
<a id="showeats">EATS</a>
<a id="showfilms">FILMS</a>
<a id="showmusic">MUSIC</a>
<a id="showtravels">TRAVELS</a>
<div id="trips">Content Trips</div>
<div id="eats">Content Eats</div>
<div id="films">Content Films</div>
<div id="music">Content Music</div>
<div id="travels">Content Travels</div>

This is trivial. You have 2 options: either add "onclick" events on each of your tags and then listen to these events with js. Or, since you added ids to each of your tags, you can now attach click events to them with js.
So, no more words. Here's the simple solution:
document.getElementById("showtrips").onclick = toggleShowForElement(document.getElementById("trips"));
document.getElementById("showeats").onclick = toggleShowForElement(document.getElementById("eats"));
document.getElementById("showfilms").onclick = toggleShowForElement(document.getElementById("films"));
document.getElementById("showmusic").onclick = toggleShowForElement(document.getElementById("music"));
document.getElementById("showtravels").onclick = toggleShowForElement(document.getElementById("travels"));
function toggleShowForElement(element) {
return () => {
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
}
body {
font-family: "Verdana", sans-serif;
}
* {
box-sizing: border-box;
}
a {
cursor: pointer;
color: #008800;
display: inline-block;
padding: 4px;
border-radius: 4px;
}
a:hover {
text-decoration: underline;
}
div {
background-color: #88DD99;
border-radius: 4px;
padding: 5px;
margin-bottom: 5px;
height: 30px;
text-align: center;
}
<a id="showtrips">TRIPS</a>
<a id="showeats">EATS</a>
<a id="showfilms">FILMS</a>
<a id="showmusic">MUSIC</a>
<a id="showtravels">TRAVELS</a>
<div id="trips">Content Trips</div>
<div id="eats">Content Eats</div>
<div id="films">Content Films</div>
<div id="music">Content Music</div>
<div id="travels">Content Travels</div>
Just added a bit of CSS to make it look a bit prettier. It's not needed here.

If you are using simple javascript you can toggle the div using the following code:
var mydiv = document.getElementById("myDIV");
if (mydiv.style.display === "none") {
mydiv.style.display = "block";
} else {
mydiv.style.display = "none";
}
If you using jQuery you can directly use toggle methods.
$( ".target" ).toggle();
I suggest you group your div and anchor tags using the class name, So it will be easy to maintain.
Your html code will be like:
<a id="showtrips" class="link">TRIPS</a>
<a id="showeats" class="link">EATS</a>
<a id="showfilms" class="link">FILMS</a>
<a id="showmusic" class="link">MUSIC</a>
<a id="showtravels" class="link">TRAVELS</a>
<div id="trips" class="content">Content Trips</div>
<div id="eats" class="content">Content Eats</div>
<div id="films" class="content">Content Films</div>
<div id="music" class="content">Content Music</div>
<div id="travels" class="content">Content Travels</div>
Your JS code will be look like:
document
.querySelectorAll('[class="link"]')
.forEach(element => element.onclick = () => {
document
.querySelectorAll('[class="content"]')
.forEach(element => {
element.style.display = 'none';
});
const mydiv = element.id.substr(4);
document.getElementById(mydiv).style.display = 'block';
});
I just created the working jsfiddle for you link here

How to count the number when click on font-awesome icon?

I have some issues with the count when click on the font-awesome icon? When i click now on the icon the number does not change.
Here is my JSfiddle. Can anybody help me?
Here is my html
<center><span id="timesClicked">0</span></center>
<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i>
Javascript
var timesClicked = 0;
function btnClick() {
timesClicked++;
document.getElementById('timesClicked').innerHTML = timesClicked;
return true
}
https://jsfiddle.net/7ghbhtcf/

This Code Will Work. You can try this
HTML:
<div id="timesClicked">Number of Downloads: 0</div>
<i class="fa fa-heart-o" aria-hidden="true" onclick="btnClick();"></i>
JavaScript:
var cnt = 0;
function btnClick() {
cnt = parseInt(cnt) + parseInt(1);
var updatedValue = document.getElementById("timesClicked");
updatedValue.innerHTML = "Number of Downloads: " + cnt + "";
}
you'll need to add the css link for Font Awesome Icon. and also add
jquery-1.8.2.js
or any other version that you are using.

If you want to, you could use JQuery, which would help you get what you are looking for.
var timesClicked = 0;
$(".fa-heart-o").on("click",function(){
timesClicked++;
document.getElementById('timesClicked').innerHTML = timesClicked;
});
<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>
<center><span id="timesClicked">0</span></center>
<i class="fa fa-heart-o btn btn-default"></i>

Your code seems to work fine if you load your javascript in the <head> or <body> tag.

Here's a JQuery script to demo ... As the others mentioned
CSS Demo
#nav {
width:480px;
margin:1em auto;
}
#nav ul {
margin:1em auto;
padding:0;
font:1em "Arial Black",sans-serif;
}
#nav ul li{
display:inline;
}
#nav ul li a{
text-decoration:none;
margin:0;
padding:.25em 25px;
background:#666; color:#ffffff;
}
#nav ul li a:hover{
background:#ff9900;
color:#ffffff;
}
#nav ul li a.active {
background:#ff9900;
color:#ffffff;
}
JQuery Demo
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
HTML Demo
<html>
<body>
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>
</body>

toggle button with font awesome and jquery

I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.
all the help would be appreciated.
here is the code:
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe

one approach is to use toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
http://codepen.io/miguelmota/pen/zGqPOX

Why not simplify this a bit by using a single element with .toggleClass().
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});

The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}

Generally and simply it works like this:
You can use this in general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>

Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.
I combined the solutions of #miguel-mota and #oka.
Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler.
Make sure to use the each function to apply multiple transformations.
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>

This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
An example:
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}

css
.rotate{
transform:rotate(180deg);
color:black
}
jquery
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});