Display none if child and parent element have the same class

Display none if child and parent element have the same class - javascript

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>

Related

Close child modal while keeping parent open only on close button click

So I'm running into some issues and I can't figure out how to close a child modal and keep the parent modal open, so I wanted to ask the community to see if I can get some assistance.
So here is what I'm attempting to do:
I open click on the 'Launch parent modal', I want the parent modal to show (This works great).
When I launch the child modal from inside the parent, I see the child modal (This works great).
I want to be able to click on the close button inside the child modal and go back to the parent modal since it's still is-active, otherwise if they click anywhere in the shaded are it will close all the modals as it currently is doing.
So to sum it up, I just want the child modal to close so that I can see the parent modal only if the click on the close button.
document.addEventListener('DOMContentLoaded', function() {
const rootEl = document.documentElement;
const $modals = document.querySelectorAll('.modal');
const $modalButtons = document.querySelectorAll('.modal-button');
const $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener('click', function () {
closeModals();
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add('is-clipped');
$target.classList.add('is-active');
}
function closeModals() {
rootEl.classList.remove('is-clipped');
$modals.forEach(function ($el) {
$el.classList.remove('is-active');
});
}
document.addEventListener('keydown', function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
})
});
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet"/>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch parent modal</button>
<div id="modal-ter" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
This is the parent modal (Scroll down and click the child modal button).
</p>
<button class="button is-primary is-large modal-button" data-target="modal-ter2" aria-haspopup="true">Launch child modal</button>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<div id="modal-ter2" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
This is the child modal
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>

I think you should bind different events for success and cancel butttons, cause they have different logics.
document.addEventListener('DOMContentLoaded', function() {
const rootEl = document.documentElement;
const $modals = document.querySelectorAll('.modal');
const $modalButtons = document.querySelectorAll('.modal-button');
const $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete');
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener('click', function () {
closeModals();
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add('is-clipped');
$target.classList.add('is-active');
}
function closeModals() {
rootEl.classList.remove('is-clipped');
$modals.forEach(function ($el) {
$el.classList.remove('is-active');
});
}
$modals.forEach(function ($el) {
$el.addEventListener('click', function(event) {
if (event.target.classList.contains('cancel')) {
$el.classList.remove('is-active');
}
})
});
document.addEventListener('keydown', function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
})
});
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet"/>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch parent modal</button>
<div id="modal-ter" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
This is the parent modal (Scroll down and click the child modal button).
</p>
<button class="button is-primary is-large modal-button" data-target="modal-ter2" aria-haspopup="true">Launch child modal</button>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button cancel">Cancel</button>
</footer>
</div>
</div>
<div id="modal-ter2" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p>
This is the child modal
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button cancel">Cancel</button>
</footer>
</div>
</div>

How to optimize code that shows one block and hides others?

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;
}
}
})

How to creat copy alerts to many buttons?

Hey am new to java script But putting my all efforts I have written a javascript to copy a text inside <p></p> But needed a alert text to be visible when the "copy" button is clicked. And mainly I have many buttons.My javascript
function copyToClipboard(var1){
let val = document.getElementById(var1).innerHTML;
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
My html
<div class="englishstatus">
<div class="car">
<div class="latestatus">
<p id="p9">life os good when hou have books</p>
<button class="copystatus btn" onclick="copyToClipboard('p9')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
<button class="copystatus btn" onclick="copyToClipboard('p10')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
<div class="car">
<div class="latestatus">
<p id="p11">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p11')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p12">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p12')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
</div>
</div>
The Copied alert in my html code is <span class="copystatusalert">Copied!</span>.I needed this element to be visible for some seconds when I click the respective copy button and be vanished after few seconds. Please help me and thanks in advance.
function copyToClipboard(var1){
let val = document.getElementById(var1).innerHTML;
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}
<div class="englishstatus">
<div class="car">
<div class="latestatus">
<p id="p9">life os good when hou have books</p>
<button class="copystatus btn" onclick="copyToClipboard('p9')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
<button class="copystatus btn" onclick="copyToClipboard('p10')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
<div class="car">
<div class="latestatus">
<p id="p11">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p11')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
<div class="latestatus">
<p id="p12">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p12')">Copy</button>
<span class="copystatusalert">Copied!</span>
</div>
</div>
</div>
</div>

In the snippet below we:
pass the button where the click occurred
find the span near it
hide it
schedule its showing in a few seconds
design the .invisible class
function copyToClipboard(var1, btn){
let val = document.getElementById(var1).innerHTML;
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.left = '0';
selBox.style.top = '0';
selBox.style.opacity = '0';
selBox.value = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
let item = btn.parentNode.querySelector(".invisible");
if (item) {
item.classList.remove("invisible");
setTimeout(function() {
item.classList.add("invisible");
}, 4000);
}
}
.invisible {
display: none;
}
<div class="englishstatus">
<div class="car">
<div class="latestatus">
<p id="p9">life os good when hou have books</p>
<button class="copystatus btn" onclick="copyToClipboard('p9', this)">Copy</button>
<span class="copystatusalert invisible">Copied!</span>
</div>
<div class="latestatus">
<p id="p10">Google is a open source library. It is a open source by lary page and sergy brime</p>
<button class="copystatus btn" onclick="copyToClipboard('p10', this)">Copy</button>
<span class="copystatusalert invisible">Copied!</span>
</div>
</div>
<div class="car">
<div class="latestatus">
<p id="p11">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p11', this)">Copy</button>
<span class="copystatusalert invisible">Copied!</span>
</div>
<div class="latestatus">
<p id="p12">Cat is better than dog</p>
<button class="copystatus btn" onclick="copyToClipboard('p12', this)">Copy</button>
<span class="copystatusalert invisible">Copied!</span>
</div>
</div>
</div>
</div>

If you refactor your code slightly you can make this all work without needing to use IDs in the calls to the main function and can use an externally registered event handler which, to my mind, is a much cleaner way to approaching this.
document.addEventListener('DOMContentLoaded',()=>{
const createtextbox=function(text){
let el=document.createElement('textarea');
el.style.position = 'fixed';
el.style.left = '0';
el.style.top = '0';
el.style.opacity = '0';
el.value = text;
document.body.appendChild(el);
return el;
};
const shortmessage=function(e,m,t){
let span=e.parentNode.querySelector( 'span' );
span.innerText=m;
setTimeout(()=>{span.innerText=''},1000 * t)
};
const copytoclipboard=function(e){
// create the hidden textarea and add the text from the sibling element
let n=createtextbox( this.parentNode.querySelector('p').innerHTML );
n.focus();
n.select();
document.execCommand('copy');
document.body.removeChild(n);
// flash a message in the SPAN-clear after 2s
shortmessage( this, 'Copied!', 2 );
};
/*
Find a reference to ALL buttons that are used to copy
text from a sibling element and assign an event handler
to process every button click.
*/
document.querySelectorAll('button.copystatus').forEach( bttn=>{
bttn.addEventListener( 'click', copytoclipboard )
});
})
<!--
In many instances there is no need to assign IDs to DOM elements in
order to target them programmatically. There are many methods native
to Javascript to navigate through the DOM - parent/child/sibling
selectors and when used in conjunction with an `Event` you can easily
locate items of interest.
-->
<div class='englishstatus'>
<div class='car'>
<div class='latestatus'>
<p>Life is good when you have books</p>
<button class='copystatus btn'>Copy</button>
<span></span>
</div>
<div class='latestatus'>
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<button class='copystatus btn'>Copy</button>
<span></span>
</div>
</div>
<div class='car'>
<div class='latestatus'>
<p>Cats are better than dogs.</p>
<button class='copystatus btn'>Copy</button>
<span></span>
</div>
<div class='latestatus'>
<p>Ferrets are better than rats</p>
<button class='copystatus btn'>Copy</button>
<span></span>
</div>
</div>
</div>

Upwards Transverse in Javascript DOM

I want to transverse upwards in javascript. like if i give input an element it will show all its parent elements till html tag but its not working like that. It only shows DIV,BODY,HTML.
function Transverse(p) {
var path = "";
var A = [];
var element = document.querySelector(document.getElementById(p).nodeName);
path = element.parentElement;
while (path) {
A.push(path);
path = path.parentElement;
}
console.log(A);
}
<div>
<button id="btn1" onclick="Transverse('btn1')">button 1</button>
<ul>
<button id="btn2" onclick="Transverse('btn2')">button 2</button>
<li>
<button id="btn3" onclick="Transverse('btn3')">button 3</button>
</li><br>
<section>
<a href="#">
<button id="btn4" onclick="Transverse('btn4')">button 4</button>
</a>
</section>
</ul>
<ol>
<li>
<h1>End of Page</h1>
<button id="btn5" onclick="Transverse('btn5')">Button 5</button>
</li>
</ol>
</div>

Thanks all it is working now ! I did the following Changes
function Transverse(p){
var A=[];
var element = document.getElementById(p);
var path=element.parentElement;
while(path){
A.push(path.nodeName);
path=path.parentElement;
}
console.log(A);
}

Pushing and popping values for each button click

On each button click, the value should be pushed into array and shown to the div.
If clicked again it should be popped out from array and removed from div as well.
I am toggling a Boolean value for this, but the popped values are not removed from the div when Boolean is false, perhaps something i am doing wrong.
Project can be edited here
$( "#button-list button" ).each(function(index) {
var items = [];
var toggle = false;
$(this).on("click", function(){
toggle = !toggle;
if(toggle === true)
items.push(this.value);
else
items.pop(this.value);
$("#results").append(items);
});
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
<button class="w3-button w3-black" value="(1,1)">(1,1)</button>
<button class="w3-button w3-black" value="(2,2)">(2,2)</button>
<button class="w3-button w3-black" value="(3,4)">(3,4)</button>
<button class="w3-button w3-black" value="(5,2)">(5,2)</button>
<button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>

3 Small changes
Declare items outside of the each() function. If not it resets for each listener
Change the append() function for text().
Append will add the items on each click. You want to replace the items on each click.
pop() will remove the last element from the array. You need to use splice(). Splice recieves 2 values. First the index you want to remove, the the amount of element to remove.
using indexOf() we can get the element index on the array.
items.splice(items.indexOf(this.value), 1);
Hope this helps :)
var items = [];
$("#button-list button").each(function(index) {
var toggle = false;
$(this).on("click", function() {
toggle = !toggle;
if (toggle === true)
items.push(this.value);
else
items.splice(items.indexOf(this.value), 1);
//console.log(items);
$("#results").text(items);
});
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
<button class="w3-button w3-black" value="(1,1)">(1,1)</button>
<button class="w3-button w3-black" value="(2,2)">(2,2)</button>
<button class="w3-button w3-black" value="(3,4)">(3,4)</button>
<button class="w3-button w3-black" value="(5,2)">(5,2)</button>
<button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>

var items = [];
$("#button-list button").on('click', function(e){
var indexOfElement = items.indexOf(e.target.value);
//value is not in the array
if (indexOfElement < 0) {
items.push(e.target.value);
} else {
//value is in the array, remove it
items.splice(indexOfElement, 1);
}
$('#results').text(items);
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
<button class="w3-button w3-black" value="(1,1)">(1,1)</button>
<button class="w3-button w3-black" value="(2,2)">(2,2)</button>
<button class="w3-button w3-black" value="(3,4)">(3,4)</button>
<button class="w3-button w3-black" value="(5,2)">(5,2)</button>
<button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>

Develop Reference

JavaScript is the programming language of the Web.

Display none if child and parent element have the same class - javascript

Related

Close child modal while keeping parent open only on close button click

How to optimize code that shows one block and hides others?

How to creat copy alerts to many buttons?

Upwards Transverse in Javascript DOM

Pushing and popping values for each button click

Categories

Resources