I have 3 blocks, when opening one, all should hide. I wrote the simplest code (I'm a beginner), I understand that it can and should be optimized. How can I do that?
I'm thinking of using "if else" construction, but not sure how to do it correctly.
function openLink(){
document.getElementsByClassName('open_link')[0].style.display = 'block';
document.getElementsByClassName('open_images')[0].style.display = 'none';
document.getElementsByClassName('open_video')[0].style.display = 'none';
}
function openImages(){
document.getElementsByClassName('open_images')[0].style.display = 'block';
document.getElementsByClassName('open_link')[0].style.display = 'none';
document.getElementsByClassName('open_video')[0].style.display = 'none';
}
function openVideo(){
document.getElementsByClassName('open_video')[0].style.display = 'block';
document.getElementsByClassName('open_images')[0].style.display = 'none';
document.getElementsByClassName('open_link')[0].style.display = 'none';
}
function closeForm(){
document.getElementsByClassName('open_link')[0].style.display = 'none';
document.getElementsByClassName('open_images')[0].style.display = 'none';
document.getElementsByClassName('open_video')[0].style.display = 'none';
}
<a onclick="openLink()" href='#'>One</a>
<a onclick="openVideo()" href='#'>Two</a>
<a onclick="openImages()" href='#'>Three</a>
<div class="open_link" style="display: none;">
<button onclick="closeForm()">Save 1</button>
<button onclick="closeForm()">Close 1</button>
</div>
<div class="open_video" style="display: none;">
<button onclick="closeForm()">Save 2</button>
<button onclick="closeForm()" >Close 2</button>
</div>
<form class="open_images" style="display: none;">
<input onclick="closeForm()" value="Upload 3"/>
<button onclick="closeForm()" >Close 3</button>
</form>
Delegate
Here is a start
const content = document.getElementById("content");
document.getElementById("nav").addEventListener("click", function(e) {
const tgt = e.target;
const id = tgt.dataset.id;
[...content.querySelectorAll("div")].forEach(div => {
if (div.id !== id) div.classList.add("hide");
})
document.getElementById(id).classList.remove("hide");
})
content.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("close")) {
tgt.closest("div").classList.add("hide")
}
})
.hide {
display: none;
}
<div id="nav">
<a data-id="link" href='#'>One</a>
<a data-id="video" href='#'>Two</a>
<a data-id="images" href='#'>Three</a>
</div>
<div id="content">
<div id="link" class="hide">
<button type="button" id="save1">Save 1</button>
<button type="button" class="close">Close 1</button>
</div>
<div id="video" class="hide">
<button type="button" id="save2">Save 2</button>
<button type="button" class="close">Close 2</button>
</div>
<div id="images" class="hide">
<form>
<input id="upload" value="Upload 3" />
<button type="button" class="close">Close 3</button>
</form>
</div>
</div>
You can sum up some of your redundant code into one function and pass parameters to it.
function openAndClose(classBlock, classNone, classNone1) {
document.getElementsByClassName(classBlock)[0].style.display = 'block';
document.getElementsByClassName(classNone)[0].style.display = 'none';
document.getElementsByClassName(classNone1)[0].style.display = 'none'
}
function closeForm(){
document.getElementsByClassName('open_link')[0].style.display = 'none';
document.getElementsByClassName('open_images')[0].style.display = 'none';
document.getElementsByClassName('open_video')[0].style.display = 'none';
}
<a onclick="openAndClose('open_link', 'open_images', 'open_video')" href='#'>One</a>
<a onclick="openAndClose('open_video', 'open_images', 'open_link')" href='#'>Two</a>
<a onclick="openAndClose('open_images', 'open_link', 'open_video')" href='#'>Three</a>
<div class="open_link" style="display: none;">
<button onclick="closeForm()">Save 1</button>
<button onclick="closeForm()">Close 1</button>
</div>
<div class="open_video" style="display: none;">
<button onclick="closeForm()">Save 2</button>
<button onclick="closeForm()" >Close 2</button>
</div>
<form class="open_images" style="display: none;">
<input onclick="closeForm()" value="Upload 3"/>
<button onclick="closeForm()" >Close 3</button>
</form>
Try this but with your own ids and classes
.open are the div to open
id of the target is id of your div, you did this with classes
document.querySelectorAll(".open").forEach(div => {
div.onclick = (e) => {
switch (e.target.id) {
case "open_link":
openLink()
break;
case "open_video":
openVideo()
break;
case "open_images":
openImages()
break;
}
}
})
Related
I have some data attributes on buttons that I need to send as content to a div when those buttons are clicked. A part of my code until now is this:
function getDiscount() {
var buttons = document.querySelectorAll(".form-button");
buttons.forEach(function(item, index) {
item.addEventListener('click', function() {
var discount = getDiscount(this);
});
});
function getDiscount(clicked_element) {
var val = clicked_element.getAttribute("data-discount");
return val;
}
};
<div class="discount__Topics">
<div><strong class="discount-amount">50</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>
<div class="discount__Topics">
<div><strong class="discount-amount">60</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="12">Offer 1</button>
<button class="form-button" data-discount="32">Offer 2</button>
<button class="form-button" data-discount="44">Offer 3</button>
<button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>
I'm just not seeing how to change the html with attribute when it's clicked and how to have two sets of buttons or more on the same page.
Hope someone can help.
Many thanks
UPDATE: Now the code is running properly but im having troubles with getting multiples div's with multiple buttons working. I've created a for.Each wic logs my div correctly but im not beeing able to have the working properly.
var discounters = document.querySelectorAll(".discount__Topics");
discounters.forEach((index) => {
console.log(index)
var buttons = document.querySelectorAll(".form-button");
buttons.forEach(function (item) {
item.addEventListener('click', function(){
var discount = getDiscount(this);
let span = document.querySelector('.discount-amount')
span.innerHTML = '<strong>' + discount+ '</strong>'
});
});
function getDiscount(clicked_element) {
var val = clicked_element.getAttribute("data-discount");
return val;
}
});
<div class="discount__Topics">
<div><strong class="discount-amount">38</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>
<div class="discount__Topics">
<div><strong class="discount-amount">12</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="12">Offer 1</button>
<button class="form-button" data-discount="32">Offer 2</button>
<button class="form-button" data-discount="44">Offer 3</button>
<button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>
You have defined two functions called getDiscount, it would be better to let them have different name
function init(){
var buttons = document.querySelectorAll(".form-button");
buttons.forEach(function (item, index) {
item.addEventListener('click', function(){
var discount = getDiscount(this);
let span = document.querySelector('.discount-amount')
span.innerHTML = '<strong>' + discount+ '</strong>%'
//span.innerHTML =discount.bold()+ '%' // we can use bold() instead
});
});
function getDiscount(clicked_element) {
var val = clicked_element.getAttribute("data-discount");
return val;
}
};
init()
<div><span class="discount-amount"><strong>55</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>
Update:
for your updated question,since it has multiple button groups and divs,so we need to sepereate them correctly.
One solution is to using index,change
let span = document.querySelector('.discount-amount')
to
let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]
In my opinios,the best way is to let them have different id or class,so that we can query them easily.
function init(){
var buttons = document.querySelectorAll(".form-button");
buttons.forEach(function (item, index) {
item.addEventListener('click', function(){
var discount = getDiscount(this);
let span = document.querySelectorAll('.discount-amount')[Math.floor(index/4)]
span.innerHTML = '<strong>' + discount+ '</strong>%'
//span.innerHTML =discount.bold()+ '%' // we can use bold() instead
});
});
function getDiscount(clicked_element) {
var val = clicked_element.getAttribute("data-discount");
return val;
}
};
init()
<div class="discount__Topics">
<div><strong class="discount-amount">50</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="38">Offer 1</button>
<button class="form-button" data-discount="50">Offer 2</button>
<button class="form-button" data-discount="22">Offer 3</button>
<button class="form-button" data-discount="88">Offer 4</button>
</div>
</div>
<div class="discount__Topics">
<div><strong class="discount-amount">60</strong>%</div>
<div class="offers">
<button class="form-button" data-discount="12">Offer 1</button>
<button class="form-button" data-discount="32">Offer 2</button>
<button class="form-button" data-discount="44">Offer 3</button>
<button class="form-button" data-discount="55">Offer 4</button>
</div>
</div>
If I understand your question correctly, you are looking for something like this.
var buttons = document.querySelectorAll(".form-button");
var discountRef = document.querySelector(".discount-amount");
function setDiscount(pointerEvent) {
// get the clicked button from the pointerEvent
var discount = pointerEvent.target.dataset.discount
// add the discount to <span class="discount-amount"></span>
discountRef.innerText = discount
}
buttons.forEach(function (item) {
item.addEventListener('click', setDiscount);
});
Let me know if this helped you out!
lets say, I have
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 < /div>
<div style="display: none" id="two" > Random Content 2< /div>
<div style="display: none" id="three" > Random Content 3< /div>
How can I write a JavaScript function or functions (no jquery please) that will toggle on and off content dynamically based on each button? if i click button 1, I want content in div id one to show, if i click it again, I want content in div id one to hide and or when i click button 2 , I want only content in dive id two to show and hide other stuff...so same patter and logic for all of them.
You've already started by giving each of those buttons a function to execute onClick. Just define those functions and check the display property of the style property of your divs.
I went ahead and made a simpler toggleId function as well to limit how much code is duplicated.
It's also worth noting that < /div> is invalid. You don't put a space in the front of a closing HTML tag. You can put one at the end, but there's no reason to. Just use </div>.
function toggleFirst()
{
toggleId("one");
}
function toggleSecond()
{
toggleId("two");
}
function toggleThird()
{
toggleId("three");
}
function toggleId(id)
{
var div = document.getElementById(id);
if(div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 </div>
<div style="display: none" id="two" > Random Content 2</div>
<div style="display: none" id="three" > Random Content 3</div>
For that you can use the style.display property
function toggleFirst() {
let one = document.getElementById("one");
if (one.style.display == "none") {
one.style.display = "block"
} else {
one.style.display = "none"
}
}
function toggleSecond() {
let two = document.getElementById("two");
if (two.style.display == "none") {
two.style.display = "block"
} else {
two.style.display = "none"
}
}
function toggleThird() {
let three = document.getElementById("three");
if (three.style.display == "none") {
three.style.display = "block"
} else {
three.style.display = "none"
}
}
<div class="buttons">
<button onclick="toggleFirst()"> Show me Hide me 1</button>
<button onclick="toggleSecond()"> Show me Hide me 2</button>
<button onclick="toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
change the functions onclick like i did and you don't have to do 3 functions
, you just need one
function toggContent(content_id) {
const x = document.getElementById(content_id)
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div class="buttons">
<button onclick="toggContent('one')"> Show me Hide me 1</button>
<button onclick="toggContent('two')"> Show me Hide me 2</button>
<button onclick="toggContent('three')"> Show me Hide me 1</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
I have these menus around my horizontal scrolling site.
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section
The goal is to filter them based if the button classes have the same class as the ones in the section. If they have the same class (in this example 'fun-stuff') then that button will display:none.
My jQuery. I feel I'm close or totally over-complicating it.
jQuery(document).ready(function($) {
var theList = $('.nav-list button');
var i;
for (i=0; i < theList.length; i++){
var theButtons = '"' + theList[i].className + '"';
var parentClassName = theList[i].closest('section').className;
// tried this one. Was close i believe but no dice
if(theButtons = theList[i].closest('section').hasClass('"' + theButtons + '"') ){
// display that button as none
}
// tried this as well and for each button got 'no' in the console
if( $(theList[i].closest('section') ).hasClass(theButtons) ){
console.log('yes');
} else {
console.log ('no');
}
}
});
Yes you overdid it somewhat
$(function() {
$("button").each(function() {
var $parent = $(this).closest("section"), // the section wrapping the button
same = $parent.hasClass($(this).attr("class")); // parent has this button's class too
$(this).toggle(!same); // hide if the same (show if not)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section>
If you have more than one class on the button and you want to hide if one of them matches
$(function() {
$("button").each(function() {
var bList = this.classList,
parentList = $(this).closest("section")[0].classList, // the DOM element's classList
same = [...parentList] // convert to iterable
.filter(ele => bList.contains(ele)) // look up parent class in button classList
.length>0; // found?
$(this).toggle(!same);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff bla">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section>
You can turn the section classes into a regular array, then filter and hide the buttons.
jQuery(document).ready(function($) {
var classes = $('#slide-1').attr("class").split(/\s+/);
classes.forEach(function (cls) {
$('.nav-list button').filter('.' + cls).hide()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section>
You can do this pretty easily with vanilla Javascript:
const classNames = document.getElementById("slide-1").classList;
document.querySelectorAll(".nav-list > button").forEach((el) => {
if(classNames.contains(el.classList)){
el.style.display = "none";
}
});
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section>
Edit: Done with two lines of code:
const classList = document.getElementById("slide-1").classList;
document.querySelectorAll(".nav-list > button").forEach(el => el.style.display = classList.contains(el.classList) ? "none": "initial");
<section class="fun-stuff portfolio-cards" id="slide-1">
<div class="nav-list">
<button class="about">ABOUT</button>
<button class="fun-stuff">FUN STUFF</button>
<button class="home">HOME</button>
<button class="professional">PROFESSIONAL</button>
<button class="contact">CONTACT</button>
</div>
</section>
I want to get the values from clicking the button with same class name, but whenever I clicked the button it shows undefined.
var clr;
const btn = document.querySelectorAll('.color');
function myFunction() {
for (var i = 0; i < btn.length; i++) {
clr = btn[i].value;
console.log(clr);
}
}
<div class="color">
<button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button>
<button class="btn" value="#10A426" onclick="myFunction()"> Green </button>
<button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button>
</div>
const btn = document.querySelectorAll('.color'); gets the div not the buttons. Change that to const btn = document.querySelectorAll('.btn');:
var clr;
const btn = document.querySelectorAll('.btn');
function myFunction() {
for (var i = 0; i < btn.length; i++) {
clr = btn[i].value;
console.log(clr);
}
}
<div class="color">
<button class="btn" value="#BADA55" onclick="myFunction()"> Yellow </button>
<button class="btn" value="#10A426" onclick="myFunction()"> Green </button>
<button class="btn" value="#8787DE" onclick="myFunction()"> Purple </button>
</div>
If you only want the value from the button being clicked, then change your code to
function myFunction(btn) {
console.log(btn.value);
}
<div class="color">
<button class="btn" value="#BADA55" onclick="myFunction(this)"> Yellow </button>
<button class="btn" value="#10A426" onclick="myFunction(this)"> Green </button>
<button class="btn" value="#8787DE" onclick="myFunction(this)"> Purple </button>
</div>
do it in this way it will give you exact result
function myFunction(event) {
clr = event.target.value;
console.log(clr);
}
<div class="color">
<button class="btn" value="#BADA55" onclick="myFunction(event)"> Yellow </button>
<button class="btn" value="#10A426" onclick="myFunction(event)"> Green </button>
<button class="btn" value="#8787DE" onclick="myFunction(event)"> Purple </button>
</div>
First: scripting where scripting should be (no inline handlers). So add an event listener to the document, and let it check if the target (the element clicked) has classname btn. In that case: iterate through the an Array of elements with className btn (Array.from(document.querySelectorAll(".btn"))) using Array.forEach to display the values of those elements.
document.addEventListener("click", myFunction);
function myFunction(evt) {
console.clear();
if (evt.target.classList.contains("btn")) {
// a button.btn was clicked, so
let report = `You clicked button with value ${evt.target.value}. Other .btn values:`;
let values = [];
Array.from(document.querySelectorAll(".btn"))
.forEach(val => val !== evt.target && values.push(val.value));
console.log(`${report} ${values.join(", ")}`);
}
}
<div class="color">
<button class="btn" value="#BADA55"> Yellow </button>
<button class="btn" value="#10A426"> Green </button>
<button class="btn" value="#8787DE"> Purple </button>
</div>
Repeating the question by following the tips of the people and the site. Sorry I didn't do it right last time.
My dilemma is as follows:
I have a custom filter with four categories, all have to be visible, but one is dependent on the other. When I select a "Categoria / Category" filter option, the next "Largura / Width" filter will receive the default values for that category, otherwise it will be blank. And so it will be, when selecting a "Largura" option, the "Perfil" filter will show the preset Largura selected options
I had managed to do with select but the customization has to be this and I am having difficulty and come to help, preferably with Javascript
If you want to see the complete project, here in codepen:
https://codepen.io/KaioRocha/pen/RwbRzWR
Snippet:
// Open Box Categoria
function abrirFiltroCategoria() {
var x = document.querySelector(".box__categoria");
if (x.style.display == 'none' || x.style.display == '') {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
// Open Box Largura
function abrirFiltroLargura() {
var x = document.querySelector(".box__largura");
if (x.style.display == 'none' || x.style.display == '') {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
// Open Box Perfil
function abrirFiltroPerfil() {
var x = document.querySelector(".box__perfil");
if (x.style.display == 'none' || x.style.display == '') {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
// Open Box Aro
function abrirFiltroAro() {
var x = document.querySelector(".box__aro");
if (x.style.display == 'none' || x.style.display == '') {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
// Get the option from categoria and show
function mostrarValueCategoria(el) {
document.querySelector('.valueCategoria').innerText = el.value;
}
// Get the option from categoria and show
function mostrarValueLargura(el) {
document.querySelector('.valueLargura').innerHTML = el.value;
}
// Get the option from categoria and show
function mostrarValuePerfil(el) {
document.querySelector('.valuePerfil').innerHTML = el.value;
}
// Get the option from categoria and show
function mostrarValueAro(el) {
document.querySelector('.valueAro').innerHTML = el.value;
}
<div class="container-fluid p-0">
<div class="filters">
<div class="container" style="display: flex; justify-content: space-between">
<div class="ui-group">
<span>Categoria</span>
<div class="selecionar" onclick="abrirFiltroCategoria()">
<p class="valueCategoria">Selecionar categoria</p>
</div>
<div class="button-group js-radio-button-group box__categoria" data-filter-group="color">
<button id="categoria_carro" class="button" data-filter=".red" value="Passeio" onclick="mostrarValueCategoria(this)">Passeio
</button>
<button class="button" data-filter=".blue" value="SUV/Pickup/4x4" onclick="mostrarValueCategoria(this)">SUV/Pickup/4x4
</button>
<button class="button" data-filter=".yellow" value="Van e Utilitário" onclick="mostrarValueCategoria(this)">Van e Utilitário
</button>
<button class="button" data-filter=".yellow" value="Caminhão e Carga" onclick="mostrarValueCategoria(this)">Caminhão e Carga
</button>
</div>
</div>
<div class="ui-group">
<span>Largura</span>
<div class="selecionar" onclick="abrirFiltroLargura()">
<p class="valueLargura">Selecionar largura</p>
</div>
<div class="button-group js-radio-button-group box__largura" data-filter-group="size" id="largura_carro">
<button class="button is-checked" data-filter="" value="500" onclick="mostrarValueLargura(this)">
500
</button>
<button class="button" data-filter=".small" value="505" onclick="mostrarValueLargura(this)">505
</button>
<button class="button" data-filter=".wide" value="510" onclick="mostrarValueLargura(this)">510
</button>
<button class="button" data-filter=".big" value="515" onclick="mostrarValueLargura(this)">515
</button>
</div>
</div>
<div class="ui-group">
<span>PERFIL</span>
<div class="selecionar" onclick="abrirFiltroPerfil()">
<p class="valuePerfil">Selecionar perfil</p>
</div>
<div class="button-group js-radio-button-group box__perfil" data-filter-group="shape">
<button class="button is-checked" data-filter="" value="01" onclick="mostrarValuePerfil(this)">01
</button>
<button class="button" data-filter=".round" value="02" onclick="mostrarValuePerfil(this)">02
</button>
<button class="button" data-filter=".square" value="03" onclick="mostrarValuePerfil(this)">03
</button>
</div>
</div>
<div class="ui-group">
<span>ARO</span>
<div class="selecionar" onclick="abrirFiltroAro()">
<p class="valueAro">Selecionar aro</p>
</div>
<div class="button-group js-radio-button-group box__aro" data-filter-group="shape">
<button class="button is-checked" data-filter="" value="04" onclick="mostrarValueAro(this)">04
</button>
<button class="button" data-filter=".round" value="05" onclick="mostrarValueAro(this)">05</button>
<button class="button" data-filter=".square" value="06" onclick="mostrarValueAro(this)">06</button>
</div>
</div>
</div>
</div>