I want to create a js or jq function to hide and show items by class with two variables, the class of the items to be shown and the class of the items to be hidden.
I can't make it works. Do anyone know what happens?
function ShowHide(ShowClass, HideClass) {
document.getElementsByClassName(ShowClass).show();
document.getElementsByClassName(HideClass).hide();
}
.ABChidden,
.DEFhidden {
display: none;
}
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
Click Me to show ABC
</button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>
<hr>
<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
Click Me to show CGE
</button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>
You can't use jQuery methods like .css() with DOM objects, you need to create a jQuery collection object with $().
function ShowHide(ShowClass, HideClass) {
$(`.${ShowClass}`).show();
$(`.${HideClass}`).hide();
}
.ABChidden,
.DEFhidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
Click Me to show ABC
</button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>
<hr>
<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
Click Me to show CGE
</button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>
or use ordinary JavaScript DOM methods and set the style property of all the selected elements.
function ShowHide(ShowClass, HideClass) {
Array.from(document.getElementsByClassName(ShowClass)).forEach(el =>
el.style.display = 'block');
Array.from(document.getElementsByClassName(HideClass)).forEach(el =>
el.style.display = 'none');
}
.ABChidden,
.DEFhidden {
display: none;
}
<button class="ABCvisible" type="button" onclick="ShowHide('ABChidden', 'ABCvisible');">
Click Me to show ABC
</button>
<p class="ABChidden">I'm ABC</p>
<button class="ABChidden" type="button" onclick="ShowHide('ABCvisible', 'ABChidden');">Click Me to hide ABC</button>
<hr>
<button class="DEFvisible" type="button" onclick="ShowHide('DEFhidden', 'DEFvisible');">
Click Me to show CGE
</button>
<p class="DEFhidden">I'm DEF</p>
<button class="DEFhidden" type="button" onclick="ShowHide('DEFvisible', 'DEFhidden');">Click Me to hide CGE</button>
You have to set the display property of the ShowClass and HideClass elements one by one. It can be easily done using loop.
function ShowHide(ShowClass, HideClass) {
elementsToDisplay = document.getElementsByClassName(ShowClass);
elementsToHide = document.getElementsByClassName(HideClass);
[...elementsToDisplay].forEach(elem => (elem.style.display = "block"));
[...elementsToHide].forEach(elem => (elem.style.display = "none"));
}
Firstly, if you run
document.getElementsByClassName('ABChidden')
it returns a list.
Secondly, show and hide are both not functions, so it won't run anyway
Try this:
function ShowHide(showClass,hideClass){
document.getElementsByClassName(showClass)[0].hidden='false';
document.getElementsByClassName(hideClass)[0].hidden='true';
}
Place each section in a container.
In the onclick listener, send in the clicked element with 'this' (this = the button element).
In the method toggleVisibility, go up a node to the parent element - the .container and toggle it's class.
Set CSS classes to .show and .hide, based on if the parent have the class .hidden.
function toggleVisibility(element) {
element.parentNode.classList.toggle("hidden");
}
.hide {
display: none;
}
.container.hidden > .show {
display: none;
}
.container.hidden > .hide {
display: block;
}
<div class="container">
<button class="show" type="button" onclick="toggleVisibility(this)">
Click Me to show ABC
</button>
<p class="hide">I'm ABC</p>
<button class="hide" type="button" onclick="toggleVisibility(this)">Click Me to hide ABC</button>
</div>
<hr>
<div class="container">
<button class="show" type="button" onclick="toggleVisibility(this)">
Click Me to show CGE
</button>
<p class="hide">I'm DEF</p>
<button class="hide" type="button" onclick="toggleVisibility(this)">Click Me to hide CGE</button>
</div>
Related
I was trying to manipulate the css when clicking on button using javascript . I want to just make a single button active the one which is recently clicked.
I am able to make it active but somehow i am not able to remove active for other which is not selected
here is what i tried in js
const myFunction = (event) => {
const clickedElem = event.target
const allBtns = document.querySelectorAll('.btn.lightblue')
allBtns.forEach(btn => btn.classList.remove('.btn.lightblue.active'))
clickedElem.classList.add('active')
}
<p>
<button onclick="myFunction(event)" class="btn lightblue">XASD</button>
<button onclick="myFunction(event)" class="btn lightblue">QWER</button>
<button onclick="myFunction(event)" class="btn lightblue">ASDF</button>
<button onclick="myFunction(event)" class="btn lightblue">ZXCV</button>
</p>
Look at the definition of the remove method:
tokenList.remove(token1[, token2[, ...tokenN]]);
It takes each class that you want to remove as a separate argument (strings with one class name in each).
It doesn't take a single argument with a CSS selector.
… and you probably only want to remove the active class anyway, not btn or lightblue.
When using remove function on btn.classList.remove, pls put className only.
const myFunction = (event) => {
const clickedElem = event.target
const allBtns = document.querySelectorAll('.btn.lightblue')
allBtns.forEach(btn => btn.classList.remove('active'))
clickedElem.classList.add('active')
}
.active {
background: red;
}
<p>
<button onclick="myFunction(event)" class="btn lightblue">XASD</button>
<button onclick="myFunction(event)" class="btn lightblue">QWER</button>
<button onclick="myFunction(event)" class="btn lightblue">ASDF</button>
<button onclick="myFunction(event)" class="btn lightblue">ZXCV</button>
</p>
you can use 1) Element.style = "..." or 2) Element.classList.add("...")
to
overwrite the css with the style attribute
add a class to the element to have it use a predefined styling. (note that elements can have multiple classes)
I have a button as such whose id I am not aware of
<button id="" class="mybtn" type=""></button>
and now I want to get the id of this button on click
("//what to write here").click(){
console.log($(this).id);//something like this i want
}
but the problem with using class selector is that I have multiple buttons which so it will select all of them and not just the one which is clicked.
You can do it like this. I commented the code for the syntax
$("button.mybtn").on("click", function() {
console.log($(this).attr("id")); // return blank when no id
console.log(this.id); // return undefined when no id
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hello" class="mybtn" type="">Sample</button>
<button id="hello1" class="mybtn" type="">Sample</button>
The event handler below is attached to all buttons (elements) with the class .btn but since you can only click one button at a time, you will only see one id per click - the id of the button clicked:
$('.mybtn').on('click', function() {
console.log( this.id );
});
$(function() {
$('.mybtn').on('click', function() {
console.log( this.id );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="id1" class="mybtn" type="">Button 1</button>
<button id="id2" class="mybtn" type="">Button 2</button>
<button id="id3" class="mybtn" type="">Button 3</button>
<button id="id4" class="mybtn" type="">Button 4</button>
Html:
<div class="buttons">
<form>
<button class="all active" type="button">All</button>
<button class="print-temp" type="button">Print template</button>
<button class="web-temp" type="button">Web template</button>
<button class="user-inter" type="button">user interface</button>
<button class="mock-up" type="button">mock-up</button>
</form>
</div>
Js:
let buttons = document.querySelectorAll(".buttons form button");
for(let button of buttons) {
console.log(button);
button.onclick = function() {
buttons.classList.remove("active") //making old active button not active
button.classList.add("active") //making new active button
};
console.log(button);
}
Every time i click on any button i get this:
Uncaught TypeError: Cannot read property 'remove' of undefined
at HTMLButtonElement.button.onclick (main.js:8)
What's wrong? Is it ".buttons form button"?
Check if any button has active class. If so then use remove to remove the class.
Also buttons here buttons.classList.remove("active") refers to the collection but not individual element
let buttons = document.querySelectorAll(".buttons form button");
for (let button of buttons) {
button.onclick = function() {
const getActiveBtn = document.querySelector('button.active');
if (getActiveBtn) {
getActiveBtn.classList.remove("active")
}
button.classList.add("active")
};
}
.active {
background: red;
color:#fff;
}
<div class="buttons">
<form>
<button class="all active" type="button">All</button>
<button class="print-temp" type="button">Print template</button>
<button class="web-temp" type="button">Web template</button>
<button class="user-inter" type="button">user interface</button>
<button class="mock-up" type="button">mock-up</button>
</form>
</div>
I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.
You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
I have a number of buttons within a section, each with an id of the form #balls-left-n, where n ranges from 1 to 15.
When one of these buttons is clicked, I want to grab the number from the id that was clicked and hide all of the buttons with ids that have names including numbers that are greater than the one clicked on.
So, if #balls-left-13 is clicked, I want to hide #balls-left-14 and #balls-left-15. But if #balls-left-3 is clicked I want to hide all the buttons from #balls-left-4 through #balls-left-15.
I'm a novice at web-dev so if I've made other mistakes or taken a poor approach don't hesitate to point that out.
I have a handler for each of the buttons (which if I knew more could probably be one function) that look like this:
$("#balls-left-14").click(function() {
var num_balls = $(this).attr('id').match(/[\d]/);
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
This didn't work and I get an error that num_balls is undefined, which I don't understand.
#balls-left is the section all of the buttons are inside of.
relevant HTML as requested
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
Hope this helps.
var exploded = id.split("-");
alert(exploded.pop());
Now, to use that concept on your HTML structure, you can do something like this:
$(document).ready(function() {
$(".x-balls-left").click(function(e) {
e.preventDefault();
var exploded = this.id.split("-");
alert(exploded.pop());
});
});
And here's a Fiddle you can play around with.
You might don't even need all of these if your elements to hide share the same parent. Just set class on click .selected and hide the rest using CSS .selected.x-balls-left ~ .x-balls-left {display: none;}
$('.x-balls-left').click(function() {
$(this).toggleClass('selected');
})
.selected.x-balls-left ~ .x-balls-left {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
$(document).on('click', '.balls-left', function() {
var num = getNum(this);
$('.balls-left').each(function() {
var that = $(this);
var bnum = getNum(that);
if (bnum > num) {
that.show();
} else {
that.hide();
}
});
});
var getNum = function(elem) {
if (elem) {
return $(elem).attr('id').replace('balls-left-', '');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="balls-left-1" class="balls-left">Ball 1</div>
<div id="balls-left-2" class="balls-left">Ball 2</div>
<div id="balls-left-3" class="balls-left">Ball 3</div>
<div id="balls-left-4" class="balls-left">Ball 4</div>
<div id="balls-left-5" class="balls-left">Ball 5</div>
$("#balls-left button:gt(num_balls-2)").hide;
This is an invalid CSS selector, and only gets the hide method, without calling it. You want something like:
$("#balls-left button:gt("+(num_balls-2)+")").hide();
First you should put a class on each object so you can reference them all at once, and the simplest way to understand is to just put the ball number right in the tag as a custom attribute if you can:
<input type="button" id="balls-left-1" class="left-ball" num="1"/>
<input type="button" id="balls-left-2" class="left-ball" num="2"/>
etc...
Then you can write the javascript as follows:
$('.left-ball').click(function () {
var BallNum = $(this).attr('num');
$('.left-ball').each(function () {
if ($(this).attr('num') > BallNum) {
$(this).hide();
}
});
});
You can use RegEx match like this. This might resolve your undefined num_balls error message.
$("#balls-left-14").click(function() {
var ret = $(this).attr('id').match("[0-9]+");
var num_balls = ret[0];
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
Another way of doing it using your original HTML:
$('.x-balls-left').click(function () {
var BallNum = $(this)[0].innerHTML;
$('.x-balls-left').each(function () {
if ($(this)[0].innerHTML > BallNum) {
$(this).hide();
}
});
});
I just did it like this:
$('button[id^=balls-left-]').click(function(){
var num_balls = $(this).attr('id').match(/[\d]/);
$('#balls-left button:gt(' + num_balls + ')').hide();
});
Keep in mind that :gt select by index, it means that $('#balls-left button:gt(2)') will not select the button with id balls-left-2 but the one with id balls-left-4 (according to the html you posted).