one for add and the other for remove
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
how to make the button follow got hide when click, and then the unfollow will show up. the function of button unfollow is same like that
You can do it like below.
$("#follow, #unfollow").click(function () {
$("#follow, #unfollow").toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hidden">Unfollow Activities</button>
</div>
take 2 classes one for showing and another for hiding. Assign show class for the one you want to show by default and another will get hide class.
then your code will do rest of the work.
check the working example below
$(".to-follow").click(function() {
$(this).find('button').toggle();
});
.show{
display:block;
}
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block show" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block hide">Unfollow Activities</button>
</div>
Maybe this is better for you
$("#follow").click(function(){
$(this).html() == "Follow Activities" ? $(this).html("Unfollow Activities") : $(this).html("Follow Activities");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
</div>
The jQuery.toggle()-method changes the style="display:none;"-property of an element adding it or removing it if it exists, I think you just want to change the hidden-class you've added in your second button, then -to do this- you can use:
.toggleClass('hidden'); // instead of .toggle()
Hope it helps.
I used this code to make it so that, when you click Follow Activities that button is disabled and Unfollow Activities is enabled, and vice versa.
$("#unfollow").click(function() {
$("#unfollow").hide()
$("#follow").show();
});
$("#follow").click(function() {
$("#follow").hide()
$("#unfollow").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
<button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>
If you wanted, you could also make it so that the Unfollow Activities button is disabled by default with $("#unfollow").hide() before both of those functions.
Related
So I have a problem getting the ID's from my buttons. My code is only returning the id value from the first tic button and not the rest of them when I click on them.
here is the HTML:
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
and here is the javascript:
const tick = document.querySelector('.tic');
tick.addEventListener('click', () =>{
var slot = tick.id;
console.log(slot);
});
it only returns 0 when I click on the first button but it does not return 1 when I click on the second one. Instead, it doesnt do anything. Any help would be great. Thanks
querySelector returns the first element.
Instead, use querySelectorAll to select all elements, loop through each and add a click event listener:
const tick = document.querySelectorAll('.tic');
tick.forEach(e => {
e.addEventListener('click', () => {
var slot = e.id;
console.log(slot);
});
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
Or, even better, use event delegation:
document.body.addEventListener('click', function(e) {
if (e.target.classList.contains("tic")) {
console.log(e.target.id);
}
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
Im kind of new to this. I would like to add and remove buttons from a tab, however i can't do it properly. It seems fairly simple but i wont work with the new buttons created using javascript. Please help me. Thanks in advance
<div class="col-lg-6 col-sm-6">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="..." id="dynagregarmarca">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
<div class='btn-group' role='group'>
<button type='button' id='following' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>
<div class='hidden-xs'>Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content" id="tabcontent">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class='tab-pane fade in' id='tab3'>
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
<input type="button" id="btnagregarmarcatab" value="Add tab" />
<input type="button" id="btneliminarmarcatab" value="remove Selected tab" />
<script>
$(document).on("click", ".btn-pref .btn", function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btnagregarmarcatab", function () {
var menu_html = "<div class='btn-group' role='group'>" +
"<button type='button' id='followings' class='btn btn-default' href='#tab3' data-toggle='tab'><span class='glyphicon glyphicon-user' aria-hidden='true'></span>" +
"<div class='hidden-xs'>Following</div>" +
"</button>" +
"</div>";
var content = "<div class='tab-pane fade in' id='tab3'>" +
"<h3>This is tab 3</h3>" +
"</div>";
$("#dynagregarmarca").append(menu_html);
$("#tabcontent").append(content);
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass("btn-primary");
});
$(document).on("click", "#btneliminarmarcatab", function () {
let elementoprimary = $(".btn-primary");
$(elementoprimary).parent().remove();
});
</script>
It only works removing the default buttons, but it removes everything if I try to remove the created buttons. Please I need some help or advice. Thanks a lot in advance. I need to do it the simple way.
You haven't specified what parent should be removed. So instead of
$(elementoprimary).parent().remove();
you should use
elementoprimary.closest(".btn-group").remove();
You also should use closest instead of parent, because closest is much safer if your DOM layout changes.
For my assignment I'm trying to create a calculator website and in the process of implementing the on and off button of that calculator. I'm working on trying to access the value of the input but keep getting the following error:
assignment_4.html:62 Uncaught TypeError: Cannot read property '0' of
null
at HTMLButtonElement.buttons.(anonymous function).onclick
<script>
let buttons=document.querySelectorAll(".col-6");
for(let i=0; i<buttons.length; i++){
buttons[i].onclick=function(){
console.log(buttons[i].innerHTML);
if(buttons[i].innerHTML=='ON / OFF'){
console.log(document.getElementById("#display").value);
if(document.getElementById("#display").value=='OFF'){
this.value="0";
}
}
else{
}
}
}
</script>
<body>
<div class="container">
<div class="row">
<h1 class="col-12 text-center mt-5">JS Calculator</h1>
</div> <!-- .row -->
<div class="row">
<div id="calculator" class="mt-4 col-12 col-md-6 ml-md-auto mr-md-auto col-lg-4">
<div class="row">
<input type="text" id="display" class="col-12 text-right form-control" value="OFF" disabled>
</div> <!-- .row -->
<div class="row">
<button class="col-6 btn btn-lg btn-outline-dark">ON / OFF</button>
<button class="col-6 btn btn-lg btn-outline-dark">AC</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">7</button>
<button class="col-3 btn btn-lg btn-outline-dark">8</button>
<button class="col-3 btn btn-lg btn-outline-dark">9</button>
<button class="col-3 btn btn-lg btn-outline-dark">/</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">4</button>
<button class="col-3 btn btn-lg btn-outline-dark">5</button>
<button class="col-3 btn btn-lg btn-outline-dark">6</button>
<button class="col-3 btn btn-lg btn-outline-dark">x</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">1</button>
<button class="col-3 btn btn-lg btn-outline-dark">2</button>
<button class="col-3 btn btn-lg btn-outline-dark">3</button>
<button class="col-3 btn btn-lg btn-outline-dark">-</button>
</div> <!-- .row -->
<div class="row">
<button class="col-3 btn btn-lg btn-outline-dark">0</button>
<button class="col-3 btn btn-lg btn-outline-dark">.</button>
<button class="col-3 btn btn-lg btn-outline-dark">=</button>
<button class="col-3 btn btn-lg btn-outline-dark">+</button>
</div> <!-- .row -->
</div> <!-- #calculator -->
</div> <!-- .row -->
</div> <!-- .container -->
You don't need the # when getting the element, since it already expects an ID. Change your call to:
document.getElementById("display")
It seems you be you're confusing jQuery with JS. There is no need to use # when using document.getElementById()
e.g. document.getElementById('display');
You need to change the reference of buttons[i] inside of the callback for the event onclick for "this". The reason is that by the time the event happens, the buttons variable is not defined and therefore its throwing an error.
buttons[i].onclick=function(){
console.log(this.innerHTML);
...
I am trying to show a line of text under a row of buttons. The text shown depends on the button you hover over. I'm having trouble using .hover() and .show() with my buttons and my text. I want to have it so the text is on a line below the buttons and if you are not hovering on a button, no text is shown. Once you click the button, the text associated with it stays on the page. I'm using Bootstrap, and as of now I have the classes of the various text possibilities hidden using CSS display:none. When I tried to hide them using jQuery under the document.ready, I couldn't seem to hide them. Perhaps it is how I have the text set up in the html code? Below is a link to the JSFiddle. Thank you in advance!
HTML
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
JavaScript
$('.btn-1').hover(function(){
$('.b-1-text').show();
});
$('.btn-2').hover(function(){
$('.b-2-text').show();
});
$('.btn-3').hover(function(){
$('.b-3-text').show();
});
$('.btn-4').hover(function(){
$('.b-4-text').show();
});
$('.btn-5').hover(function(){
$('.b-5-text').show();
});
CSS
.col-xs-5ths {
width: 20%;
float: left;
}
.b-1-text{
display: none;
}
.b-2-text{
display: none;
}
.b-3-text{
display: none;
}
.b-4-text{
display: none;
}
.b-5-text{
display: none;
}
https://jsfiddle.net/anbenya/h7fua94s/2/
You can simplify this quite a bit and just have a single $.hover(). Updated your code to reflect that with a data-id attribute on the buttons that will toggle the appropriate text box.
And you can toggle a .selected class to the text boxes when you click on a button that will make that text box always shown until you click the button again.
$(document).ready(function() {
$('.btn').hover(function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').show();
}, function() {
$('.b-text').hide();
}).on('click',function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').toggleClass('selected');
});
});
.col-xs-5ths {
width: 20%;
float: left;
}
.b-text {
display: none;
}
.selected {
display: block!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
Firstly, there was a missing ( at the end and secondly JQuery wasn't selected in your JSFiddle.
$(document).ready(function() {
$('.btn-1').hover(function() {
$('.b-1-text').show();
});
$('.btn-2').hover(function() {
$('.b-2-text').show();
});
$('.btn-3').hover(function() {
$('.b-3-text').show();
});
$('.btn-4').hover(function() {
$('.b-4-text').show();
});
$('.btn-5').hover(function() {
$('.b-5-text').show();
});
})
This here is my code.
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).parent().remove();
});
});
<div class="row lead" style="margin-left:100px;color:red">
<div class="col-md-2"><span style="color:red></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-3">
<button type="button" class="btn btn-default btn-lg remove"> </button>
<button type="button" class="btn btn-default btn-lg"></button>
<button type="button" class="btn btn-default btn-lg"></button>
</div>
</div>
I want the entire div to get deleted when the button of class="btn btn-default btn-lg remove" gets clicked. I cant use id because i am dynamically appending the above div using append jquery.
You can use closest
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).closest('.row').remove();
});
});
I guess you just want to get one level higher?
This deletes the whole div "row lead".
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).parent().parent().remove();
});
});
use closest() in jquery
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).closest(".row.lead").remove();
});
});