We Keep Coding

problem in #click event which adding one more fontawesome icon

i tried to make responsive navigation with vue js, when i tried to add '#click' to toggle burger bar or close icon, but it's adding the 'close' icon instead every time i click it.
here's the code
template section
<template>
// ----
<button #click="toggleButton">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="!toggleClose" class="fas fa-times"></i>
</button>
// ----
</template>
script section
<script>
export default {
name: "MultiNav",
data: function() {
return {
toggle: false,
toggleClose: true
};
},
methods: {
toggleButton() {
this.toggle = !this.toggle;
this.toggleClose = !this.toggleClose;
}
}
};
</script>
pict :
i try to use :
<button #click="toggle = ! toggle">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="toggle" class="fas fa-times"></i>
</button>
it still resulting the same result

You need to add a key to the icons.
<button #click="toggle = ! toggle">
<i v-if="!toggle" key="bars" class="fas fa-bars"></i>
<i v-if="toggle" key="times" class="fas fa-times"></i>
</button>
The key will tell Vue's algorithm that the icons are in fact different elements. Without that the virtual dom representation thinks that they are the same element.

Try switching the classes using condition
<button #click="toggle = ! toggle">
<i class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>

Why click event works after two clicks VANILLA

I am trying to trigger a function through a event listener with only one click.
But it occurs after two click (in the first time) if I don't do F5 its trigger after one click.
Code:
HTML
<div class="main-header-navbar">
....
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
</div>
JS
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else ADD_FORM.style.display = "none";
});
What am I missing?

You probably need to add style="display: none;" to your ADD_FORM so that it's initially hidden, then when you click on the fa-plus it will display it. See the snippet below:
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");
ADD_FORM_BUTTON.addEventListener("click", function(event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else {
ADD_FORM.style.display = "none"
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="main-header-navbar">
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
<div id="form" style="display: none;">ADD_FORM</div>
</div>

Toggle button state via jQuery

I have two buttons like (thumbs up) and unlike (thumbs down). Clicking on one button should toggle the state of both, only one being active.
Here is what I have attempted so far:
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_'.$row['tag_number_id'].'" value="unlike">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
<button type="button" class="bout like bthumb boutontagthumbup" id="like_'.$row['tag_number_id'].'" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>
<script type="text/javascript">
$(function(){
console.log( "ready!" );
$(".bout").click(function(){
var Id = this.id;
var Idunlike = ("#" + Id + ".bout.unlike");
var Idlike = ("#" + Id + ".bout.like");
if ( $(this).attr("value") == 'unlike' ){
$(Idunlike).toggleClass("boutontagthumbdownclic");
$(Idlike).addClass("boutontagthumbupclicreturn");
console.log(Idunlike);
} else if ( $(this).attr("value") == 'like' ) {
$(Idlike).toggleClass("boutontagthumbupclic");
$(Idunlike).addClass("boutontagthumbdownclicreturn");
console.log(Idlike);
}
});
});
</script>

try this
$(function(){
$(".bout").click(function(){
var id = $(this).attr('id').split('_')[1];
switch($(this).attr('value')){
case 'like' :
$('#like_'+id).addClass('boutontagthumbupclic').removeClass('boutontagthumbupclicreturn');
$('#unlike_'+id).addClass('boutontagthumbdownclicreturn').removeClass('boutontagthumbdownclic');
break;
case 'unlike' :
$('#like_'+id).addClass('boutontagthumbupclicreturn').removeClass('boutontagthumbupclic');
$('#unlike_'+id).addClass('boutontagthumbdownclic').removeClass('boutontagthumbdownclicreturn');
break;
}
});
});
.boutontagthumbupclic{color:green;}
.boutontagthumbdownclic{color:red;}
.boutontagthumbdownclicreturn,
.boutontagthumbupclicreturn{color:#555;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_1" value="unlike"><i class="fa fa-thumbs-down fa-lg"></i></button>
<button type="button" class="bout like bthumb boutontagthumbup" id="like_1" value="like"><i class="fa fa-thumbs-up fa-lg"></i></button>

The following should work:
$(function(){
$(".status button").click(function () {
$(".status").find(".active").removeClass("active");
$(this).addClass("active");
})
});
HTML:
<div class="status">
<button type="button" class="like" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>'
<button type="button" class="unlike" value="like">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
</div>
CSS:
.like i, .unlike i {
color: gray
}
.like.active i {
color: green;
}
.unlike.active i {
color: red;
}

Change class on span tag onClick inside Button tag

<button class="btn btn-primary" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span></button>
When I press this button I want the span class to change:
From: class="glyphicon glyphicon-play"
To: class="glyphicon glyphicon-pause"
http://jsfiddle.net/fnfNm/35/ Ive looked att this example but it doesnt have a class before it changes.
Please give me jsfiddle example.

I solved it like this:
HTML
<button class="btn btn-primary playPauseBtn" onclick="myFunction()" type="button">
<span id="playPauseSpanId" class="glyphicon glyphicon-play"></span>
</button>
Javascript
function myFunction(){
wavesurfer.playPause();
if(wavesurfer.isPlaying() == true){
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-pause"
}else {
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-play"
}
}

Here small algorithm for change class.
var playPauseBtn = document.querySelector('.playPauseBtn');
if(playPauseBtn){
var span = document.querySelector('.playPauseBtn .glyphicon');
playPauseBtn.addEventListener('click', function(){
if (span) {
if (span.classList.contains('glyphicon-play')) {
span.classList.remove('glyphicon-play');
span.classList.add('glyphicon-pause');
} else {
span.classList.remove('glyphicon-pause');
span.classList.add('glyphicon-play');
}
}
},false);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary playPauseBtn" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span>
</button>

How to toggle button icon and description javascript

here is my problem. I need on click to change button icon and on another click to go to original state, like +,- and span description like home/back
i dont know what to do. Pleas help.
Here is html...
<div class="navbar-left left">
<button class="toggle btn mr2 white " >
<i class="fa fa-home fa-2x "></i>
<span class="mobile-hide ">Home</a>
</button>
</div>
and bad js
if ($('.toggle').hasClass('fa fa-home fa-2x')) {
$('.toggle').toggleClass('fa fa-home ').html('<span class="mobile-hide ">Home</a>');
} else($('.toggle').hasClass('fa fa-home ')) {
$('.toggle').toggleClass('fa fa-home fa-2x ').html('<span class="mobile-hide ">Back</a>');
}
toggleMenu();
});

You can
jQuery(function($){
$('.toggle').click(function () {
var $i = $(this).find('i').toggleClass('fa-2x');
$(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
})
})
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
<button class="toggle btn mr2 white" >
<i class="fa fa-home fa-2x"></i>
<span class="mobile-hide">Home</span>
</button>
</div>

You can only use .hasClass() to check for a single class Name.
In order to check for many class names I guess is better get the class attribute string and check with .indexOf()
if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {
The same happens with toggleClass. You have to break it down:
$('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')

You might be able to achieve this effect with the ::after pseudo-element. Just change the content property as appropriate based on some class on the button.
A simplified example:
$(function () {
$('#toggle').click(function () {
$(this).toggleClass('on');
});
});
.icon::after {
content: '+';
}
.text::after {
content: 'Home';
}
.on .icon::after {
content: '-'
}
.on .text::after {
content: 'Back'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">
<i class="icon"></i>
<span class="text"></span>
</button>