I am using the ButtonToolBar react component with three buttons. I want only the clicked button to change colour but nothing happens when the button is clicked. This is my code below:
'''
<ButtonToolbar>
<Button
id="todayButton"
appearance="ghost"
onClick={this.handleTodayButtonClick}
name="todayButton"
>
Today
</Button>
<Button
id = "weekButton"
appearance="ghost"
onClick={this.handleWeekButtonClick}
name="weekButton"
>
This Week
</Button>
<Button
id = "monthButton"
appearance="ghost"
onClick={this.handleMonthButtonClick}
name="monthButton"
>
This Month
</Button>
</ButtonToolbar>
'''
Related
I have two separate button like grid and list button:
<button
onClick={() => setClassName('jsGridView')}
title="Grid View"
>
<IoGrid className="active" size="25"/>
</button>
<button
onClick={() => setClassName('jsListView')}
title="List View"
>
<BiAlignLeft size="25"/>
</button>
const [cName, setClassName] = useState('jsGridView');
So when i click Grid view button it will show this component:
<GridCard className={cName}/>
and when i click list view button it will show
<ListCard className={cName}/>
with this mentioned className..
class is changed button but show hide component is not working.
You can display different components depending on the value of cName.
<div className="row mt-4 book-div">
<div className={cName}>
{ cName === 'jsGridView' ? <BooksGridCard/> : <BooksListCard/> }
</div>
</div>
How can I write a function that hides a specific button using vanilla js?
<button class"btn">button 1 </button>
<button class"btn">button 2 </button>
<button class"btn">button 3 </button>
For example what I want is when I click button 2, button 1 and 3 will be hidden.
You can use document.querySelector("button:nth-child(2)") for getting 2nd button, addEventListener and style.display for your requirement.
var second = document.querySelector("button:nth-child(2)");
second.addEventListener("click", button2click);
function button2click() {
var first = document.querySelector("button:nth-child(1)");
var third = document.querySelector("button:nth-child(3)");
first.style.display = 'none';
third.style.display = 'none';
}
<button class"btn">button 1 </button>
<button class"btn">button 2 </button>
<button class"btn">button 3 </button>
first of all, thank you for your time to read this question, and two things, I'm using ES5 and I don't use jQuery.
Right now I'm struggling a lot to figure what's the correct solution for the addEventListener, because for some reason it does not trigger for the second button which is only for the mobile screen dimensions, the problem is that the second button have the same id but different class, for example this:
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
{/* Desktop screen button */}
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
{/* Mobile screen button */}
<button id="buy-now" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>
Where I am trying to trigger the second button but it does not where I don't understand why it does, if the id is the same, should not matter, so I'm trying to figure how to trigger from the first button if it's clicked and also with the second if it's clicked, but I'm out of ideas...
var button = document.getElementById('buy-now');
if (!button) {
return;
}
button.addEventListener('click', function trackAddToCart() {
// more code for the event
}
I thought an idea to capture the attribute of the button, but it works in the first button but not for the second one:
var button = document.getElementById('buy-now');
var att = button.getAttribute('class');
button.addEventListener('click', function() {
console.log('class ' + att); //shows: class: btn btn-lg hidden-sm-down btn-primary
console.log('button class? '+ button); //shows: button element: [object HTMLButtonElement]
});
But when I click the second button... does not trigger or happening nothing, not sure why... and I can't change the id value (which it should be easy but I can't "company standard")
Can anyone help me to have an idea how to capture and trigger the event for the second button ??
The attribute id must be unique in a document. You can use attributeStartsWith selector or class with querySelectorAll(). Then loop through all the button to attach the event (click) individually:
//var button = document.querySelectorAll('.btn.btn-primary');
var button = document.querySelectorAll('[id^=buy-now]');
button.forEach(function(btn){
btn.addEventListener('click', function() {
console.log('class ' + this.classList);
console.log('button class? '+ this.id);
});
});
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
<button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>
nextElementSibling seems working in this case.
var btn1 = document.getElementById("btn");
var btn2 = btn1.nextElementSibling;
btn1.addEventListener("click",function(e){
console.log("btn1");
});
btn2.addEventListener("click",function(e){
console.log("btn2");
});
<div>
<button id="btn" class="btn1">butotn 1</button>
<button id="btn" class="btn2">butotn 2</button>
</div>
I have a custom toggle dropdown:
import React from 'react';
import 'react-datepicker/dist/react-datepicker.css';
const DateRange = props => (
<div className="dropdown artesianDropdownContanier">
<div className="btn-group width100">
<button type="button" className="btn dropdown-width">{props.selected}</button>
<button type="button" className="btn dropdown-toggle dropdown-toggle-split artesianDropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="sr-only">Toggle Dropdown</span>
</button>
<div className="dropdown-menu artesianDropdown">
{props.dropDownValues.map(val => (
<span
key={val}
value={val}
className={`dropdown-item ${props.dropdownItemClass}`}
onClick={() => props.onClick(val)}
aria-hidden="true"
>
{val}
</span>
))
}
</div>
</div>
</div>
);
export default DateRange;
Wich looks like this on the page:
When I go to resize the webpage the arrow portion of the component spills out of its bootstrap container:
If I set display on the arrow to "none" you can see that the dropdown button itself with the text is resizing perfectly. It seems to be the dropdown arrow portion which is giving me trouble.
Any ideas on how to keep this guy firmly in his parent container?
Thanks!
Try adding this style to the component containing {props.selected} :
<button
type="button"
className="btn dropdown-width"
style={{
textOverflow: 'ellipsis',
overflow: 'hidden'
}}
>
{props.selected}
</button>
This should replace the end of the {props.selected} text by 3 dots and let the place to the dropdown button. (some adjustments may be needed depending on your dropdown-width class)
I have ten buttons with a button for next and previous,
when I click the next button, it should show the next two buttons (hiding the rest).
The reverse should happen when the previous button is clicked (Show the previous two buttons (hide the rest)).
thanks.
my html code is :
<div>
<button class="menu">M1</button>
<button class="menu">M2</button>
<button class="menu">M3</button>
<button class="menu">M4</button>
<button class="menu">M5</button>
<button class="menu">M6</button>
<button class="menu">M7</button>
<button class="menu">M8</button>
<button class="menu">M9</button>
<button class="menu">M10</button>
</div>
<div>
<button class="action" id="btnNext">Next</button>
<button class="action" id="btnPreview">Previous</button>
</div>
Initially make every button hidden except first two.
$("#btnNext").on('click', function(){
var vBtn = $(".menu:visible:last");
$(".menu").hide();
vBtn.next().show();
vBtn.next().next().show();
});
$("#btnPreview").on('click', function(){
var vBtn = $(".menu:visible:first");
$(".menu").hide();
vBtn.prev().show();
vBtn.prev().prev().show();
});
I manually coded not tested please check
$("button.menu").not(':eq(0),:eq(1)').hide();
var count = 1;
$("#btnNext").click(function() {
$("button.menu").hide();
count = count + 2;
$("button.menu").eq(count-1).show();
$("button.menu").eq(count).show();
});
$("#btnPreview").click(function() {
$("button.menu").hide();
count = count - 2;
$("button.menu").eq(count-1).show();
$("button.menu").eq(count).show();
});