I have been working on a calculator as a learning project for myself. It is working fine except I cannot figure out how to stop people from adding app breaking inputs such as 1++-*/4. I have tried various things like splitting my current display into an array and comparing it to another array with all the operators. I have also tried if(output.includes(input){ blah blah }.
I tried adding an extra else if to the getbuttonpress which went something like this else if(input == "*" || input == "+" || input == "/" || input = "-"){do something}
It didn't really work out for me.
Could someone please explain some different methods that I could use to resolve the issue?
Here is my code:
var resultDisplayed = false;
function getButtonPress() {
var input = this.value;
if (input == "=") {
console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
console.log(input);
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the below code to your getButtonPress function
It will check whether both the current input and previous entry are operators.
If yes, it will replace the previous operator with new one
var element=document.getElementById("output");
if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
}
var resultDisplayed = false;
function getButtonPress() {
var input;
var element=document.getElementById("output");
if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
}
input = this.value;
if (input == "=") {
console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Added try catch statement.
It may not be the best solution. You should build some kind of parser, but this will also work very well.
var resultDisplayed = false;
//1++-*/4
function getButtonPress() {
var input = this.value;
if (input == "=") {
//console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
//console.log(input);
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
try{
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}catch(e){
console.log("Invalid expression");
document.getElementById("output").innerHTML = 0;
}
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
The final else in getButtonPress has to look like this:
else {
var operators = ["+", "-", "*", "/", "."],
lastCharacter = document.getElementById("output").innerHTML[document.getElementById("output").innerHTML.length - 1];
if(!operators.includes(lastCharacter) || !operators.includes(input)){
document.getElementById("output").innerHTML += input;
console.log(input);
resultDisplayed = false;
}
}
Intuitively,
!operators.includes(lastCharacter) || !operators.includes(input)
can be thought of as the logical expression
operators.includes(lastCharacter) → ¬operators.includes(input)
which means “if the last character is an operator, the next input isn’t an operator”. if this is the case, the symbol is added to the output screen, otherwise it isn’t.
This still won’t prevent you from entering numbers like 2.5.6 or ending the expression with an operator, but this solves the described problem.
another option, delete 0 in start and delete operands in last character when getResult() called
var resultDisplayed = false;
function getButtonPress() {
var input = this.value,
output = document.getElementById("output");
if(input == "=") {
//console.log("bang");
getResult();
}
else if(resultDisplayed && input < 10) {
output.innerHTML = input;
resultDisplayed = false;
}
else {
//console.log(input);
var currentValue = output.innerHTML;
// start with 0 + digit, delete it
if((currentValue+input).match(/^0\d/)){
input = input;
}
// end with +-*/ delete it
else if(currentValue.match(/[-\+\*\/]$/) && input.match(/[-\+\*\/]/)) {
input = currentValue.slice(0, -1) +''+ input;
}
else{
input = currentValue + input
}
output.innerHTML = input;
resultDisplayed = false;
}
}
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
function getResult() {
var result = document.getElementById("output").innerHTML;
if(result.match(/[-\+\*\/]$/))
result = result.slice(0, -1);
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class="number">7</h1>
</button>
<button class="button" value="8">
<h1 class="number">8</h1>
</button>
<button class="button" value="9">
<h1 class="number">9</h1>
</button>
<button class="button" value="+">
<h1 class="number">+</h1>
</button>
<button class="button" value="4">
<h1 class="number">4</h1>
</button>
<button class="button" value="5">
<h1 class="number">5</h1>
</button>
<button class="button" value="6">
<h1 class="number">6</h1>
</button>
<button class="button" value="-">
<h1 class="operator">-</h1>
</button>
<button class="button" value="1">
<h1 class="number">1</h1>
</button>
<button class="button" value="2">
<h1 class="number">2</h1>
</button>
<button class="button" value="3">
<h1 class="number">3</h1>
</button>
<button class="button" value="*">
<h1 class="operator">*</h1>
</button>
<button class="button" value=".">
<h1 class="operator">.</h1>
</button>
<button class="button" value="0">
<h1 class="number">0</h1>
</button>
<button class="button" value="=">
<h1 class="operator">=</h1>
</button>
<button class="button" value="/">
<h1 class="operator">/</h1>
</button>
</div>
</div>
Here is the Code that will not accept multiple operands
function calc(opr)
{
var a2=0;
var a1 = cal.display.value;
a2 = a1.charAt(a1.length-1);
if(a2 == '/' || a2 == '+' || a2 == '-' || a2 == '*')
{
cal.display.value = a1.substring(0,a1.length-1);
cal.display.value += opr;
}
else
{
cal.display.value+= opr;
}
}
Whenever you click any operand button you need to take the last val from the input and see if its one of the operands, if it is skip like below.
$('#button-plus').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);
if (lastChar == '*' || lastChar == '-' || lastChar == '+' || lastChar == '/' || lastChar == '.' || lastChar == '(' || lastChar == '%'){
// DO NOTHING
}
else if (firstChar == '0'){
// DO NOTHING
}
else {
addChar(this.form.display, '+');
}
$('#disp').removeClass("result");
dotCount = 0;
});
Related
How can I animate this so when the div appears and disappears expands down and retracts up? I thought maybe with css3 animations but when I add transition animations to my CSS it doesn't do anything.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.display == "none") {
off.style.display = "block";
} else {
off.style.display = "none";
}
}
#SearchContainer {
border: none;
outline: none;
display: block;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 40px;
min-height: 40px;
max-height: 40px;
}
<menu name="WindowMenu" id="WindowMenu" class="WindowMenu">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowControlWrapper">
<i name="SearchIcon" id="SearchIcon" class="fa-solid fa-magnifying-glass" onclick="SearchToggle()"></i>
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
</form>
I tried this instead to try an animate the height transition with CSS but it's ceased to work after changing it to height.
function SearchToggle(){
var off=document.getElementById('SearchContainer');
if (off.style.height == "0px") {
off.style.height = "40px";
} else {
off.style.display = "0px";
}
}
#SearchContainer {
border: none;
outline: none;
background-color: silver;
color: #FFF;
margin: 0 0 0 0;
float: left;
width: 400px;
min-width: 400px;
max-width: 400px;
height: 0px;
//min-height: 40px;
//max-height: 40px;
transition: height 2s;
}
Ok, Here is what I think you want:
var current = "up";
function SearchToggle(){
if(current == "up"){
document.getElementById("WindowMenu").classList.remove("WindowMenuUp")
document.getElementById("WindowMenu").classList.add("WindowMenuDown")
current = "down";
}
else {
document.getElementById("WindowMenu").classList.remove("WindowMenuDown")
document.getElementById("WindowMenu").classList.add("WindowMenuUp")
current = "up";
}
}
.WindowMenuDown {
height: 40px;
transition: 1s;
}
.WindowMenuUp {
height: 0;
transition: 1s;
}
#WindowControl-Wrapper {
overflow: auto;
}
<menu name="WindowMenu" id="WindowMenu" class="">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowControlWrapper">
<i name="SearchIcon" id="SearchIcon" class="fa-solid fa-magnifying-glass"></i>
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
<input type="button" value="Button" onclick="SearchToggle()">
</form>
If you decide to use JQuery as requested, here is a snippet:
#WindowControl-Wrapper {
display: none;
overflow: auto;
}
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<menu name="WindowMenu" id="WindowMenu" class="">
<span name="WindowIcon-Span" id="WindowIcon-Span" class="WindowIcon-Span">
<img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG" class="WindowIcon-PNG" />
</span>
<span name="WindowTitle" id="WindowTitle" class="WindowTitle"> PROTON CORE </span>
<div name="WindowControl-Wrapper" id="WindowControl-Wrapper" class="WindowMenuUp">
<input type="button" value="" name="WindowControl-1" id="WindowControl-1" class="WindowControl-1" onclick="window.close(true)" />
<input type="button" value="" name="WindowControl-2" id="WindowControl-2" class="WindowControl-2" />
</div>
</menu>
<form name="SearchContainer" id="SearchContainer" class="SearchContainer">
<input type="button" value="Button" id="button">
</form>
<script type="text/javascript">
<!--
$(document).ready(function(){
var current = "up";
$('#button').on('click',function() {
if(current == "up"){
$('#WindowControl-Wrapper').show(500).slideDown(500);
current = "down"
}
else{
$('#WindowControl-Wrapper').hide(500).slideUp(500);
current = "down"
}
});
})
//-->
</script>
</body>
I am trying to build a basic calculator. I seem to have done everything right. I am trying to get the buttons to show up on the screen as they are being pressed but I keep on getting an undefined value.
When I console.log the numbers. I get an array value. I have converted them to arrays and I see the correct innerText value but I still can't get them to display on my calculator display.
'use strict'
const input = document.querySelector('.calculator-display');
const number = document.querySelectorAll('.number-buttons');
const numbers = Array.from(number)
numbers.forEach(button => {
button.addEventListener('click', function() {
input.value = number.innerText;
});
});
.calculator-display {
height: 200px;
width: 85%;
background-color: white;
font-size: 7rem;
}
.operator-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
.number-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
<input type="text" class="calculator-display" />
<div class="buttons">
<button class="operator-buttons">*</button>
<button class="operator-buttons">/</button>
<button class="operator-buttons">-</button>
<button class="operator-buttons">+</button>
<button class="number-buttons">.</button>
<button class="number-buttons">9</button>
<button class="number-buttons">8</button>
<button class="number-buttons">7</button>
<button class="number-buttons">6</button>
<button class="number-buttons">5</button>
<button class="number-buttons">4</button>
<button class="number-buttons">3</button>
<button class="number-buttons">2</button>
<button class="number-buttons">1</button>
<button class="number-buttons">0</button>
<button class="number-buttons">=</button>
<button class="number-buttons">DELETE</button>
</div>
number is a node list, not an <button>. It doesn't have an innerText property.
The <button> that was just clicked on is stored in the button variable.
Just replace number.innerText; with button.innerText;. Pointed out by #Thomas also.
'use strict'
const input = document.querySelector('.calculator-display');
const number = document.querySelectorAll('.number-buttons');
const numbers = Array.from(number)
numbers.forEach(button => {
button.addEventListener('click', function() {
input.value = button.innerText;
});
});
.calculator-display {
height: 200px;
width: 85%;
background-color: white;
font-size: 7rem;
}
.operator-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
.number-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
<input type="text" class="calculator-display" />
<div class="buttons">
<button class="operator-buttons">*</button>
<button class="operator-buttons">/</button>
<button class="operator-buttons">-</button>
<button class="operator-buttons">+</button>
<button class="number-buttons">.</button>
<button class="number-buttons">9</button>
<button class="number-buttons">8</button>
<button class="number-buttons">7</button>
<button class="number-buttons">6</button>
<button class="number-buttons">5</button>
<button class="number-buttons">4</button>
<button class="number-buttons">3</button>
<button class="number-buttons">2</button>
<button class="number-buttons">1</button>
<button class="number-buttons">0</button>
<button class="number-buttons">=</button>
<button class="number-buttons">DELETE</button>
</div>
The object you want the innerText from is part of the input parameter to the function the listener calls. You are trying to get innerText from number which is not a button object at all. Try this:
numbers.forEach(button => {button.addEventListener('click', function(event){
if (event.target) {
input.value = event.target.innerText;
}
})
You missed the input text element? and replace to this input.value = button.innerText; inside the js method.
fiddle to playaround.
const input = document.querySelector('.calculator-display');
const number = document.querySelectorAll('.number-buttons');
const numbers = Array.from(number)
numbers.forEach(button => {
button.addEventListener('click', function() {
input.value = button.innerText;
})
});
.calculator-display {
height: 40px;
width: 85%;
background-color: white;
font-size: 3rem;
color: red;
}
.operator-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
.number-buttons {
width: 20%;
height: 50px;
font-size: 2.5rem;
margin: 0;
padding: 10px;
}
<div class="buttons">
<input type="text" class="calculator-display">
<button class="operator-buttons">*</button>
<button class="operator-buttons">/</button>
<button class="operator-buttons">-</button>
<button class="operator-buttons">+</button>
<button class="number-buttons">.</button>
<button class="number-buttons">9</button>
<button class="number-buttons">8</button>
<button class="number-buttons">7</button>
<button class="number-buttons">6</button>
<button class="number-buttons">5</button>
<button class="number-buttons">4</button>
<button class="number-buttons">3</button>
<button class="number-buttons">2</button>
<button class="number-buttons">1</button>
<button class="number-buttons">0</button>
<button class="number-buttons">=</button>
<button class="number-buttons">DELETE</button>
</div>
I tried to implement a toggleable button group into my popup window. It works kinda... but not fully. Heres the code, it is kinda complicated to explain so please enable all buttons in the snippet and then you will see. And yea, i know. The code is very unoptimised, just tried to make it work.
Thanks for any help! :)
document.getElementById("off1").addEventListener("click", function() {
if(document.getElementById("off1")) {
document.getElementById("off1").id = "on";
} else {
document.getElementById("on").id = "off1";
}
});
document.getElementById("off2").addEventListener("click", function() {
if(document.getElementById("off2")) {
document.getElementById("off2").id = "on";
} else {
document.getElementById("on").id = "off2";
}
});
document.getElementById("off3").addEventListener("click", function() {
if(document.getElementById("off3")) {
document.getElementById("off3").id = "on";
} else {
document.getElementById("on").id = "off3";
}
});
document.getElementById("off4").addEventListener("click", function() {
if(document.getElementById("off4")) {
document.getElementById("off4").id = "on";
} else {
document.getElementById("on").id = "off4";
}
});
document.getElementById("off5").addEventListener("click", function() {
if(document.getElementById("off5")) {
document.getElementById("off5").id = "on";
} else {
document.getElementById("on").id = "off5";
}
});
document.getElementById("off6").addEventListener("click", function() {
if(document.getElementById("off6")) {
document.getElementById("off6").id = "on";
} else {
document.getElementById("on").id = "off6";
}
});
document.getElementById("off7").addEventListener("click", function() {
if(document.getElementById("off7")) {
document.getElementById("off7").id = "on";
} else {
document.getElementById("on").id = "off7";
}
});
document.getElementById("off8").addEventListener("click", function() {
if(document.getElementById("off8")) {
document.getElementById("off8").id = "on";
} else {
document.getElementById("on").id = "off8";
}
});
input {
width: 95px;
float:left;
font-size: 12px;
border-radius: 2px;
margin: 5px;
padding: 3px;
}
#off1, #off2, #off3, #off4, #off5, #off6, #off7, #off8 {
background-color: #101820FF;
color: #fff;
border:1px solid white;
}
#on {
background-color: #FEE715FF;
color:#101820FF;
border: 1px solid #FEE715FF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/popup.css">
</head>
<body>
<div class="item-toggle-group">
<input type="button" id="off1" value="jackets">
<input type="button" id="off2" value="shirts">
<input type="button" id="off3" value="tops/sweaters">
<input type="button" id="off4" value="sweatshirts">
<input type="button" id="off5" value="pants">
<input type="button" id="off6" value="hats">
<input type="button" id="off7" value="bags">
<input type="button" id="off8" value="accessories">
<script src="../js/toggleButton.js"></script>
</div>
</body>
</html>
Use a data attribute to identify if a button is on and classes to identify the buttons.
Html
<input type="button" class="button" value="jackets" data-on="0">
<input type="button" class="button" value="thing2" data-on="0">
<input type="button" class="button" value="thing3" data-on="0">
<input type="button" class="button" value="thing4" data-on="0">
<input type="button" class="button" value="thing5" data-on="0">
Javascript
document.getElementsByClassName("button").addEventListener("click", function() {
if(this.getAttribute("data-on") == "1") {
this.setAttribute("data-on", "0");
} else {
this.setAttribute("data-on", "1");
}
});
CSS
.button {
... css for buttons that are off
}
.button[data-on=1] {
... css for buttons that are on
}
Using classes makes it generic so you can just add buttons on the fly without adding an event listener for that specific button.
Instead of id you can use class so that you can use classList.toggle method to toggle on class on specific button click.
document.querySelectorAll('.toggle').forEach(function(button) {
button.addEventListener('click', function() {
this.classList.toggle('on');
})
})
input {
width: 95px;
float: left;
font-size: 12px;
border-radius: 2px;
margin: 5px;
padding: 3px;
}
.toggle {
background-color: #101820FF;
color: #fff;
border: 1px solid white;
}
.on {
background-color: #FEE715FF;
color: #101820FF;
border: 1px solid #FEE715FF;
}
<div class="item-toggle-group">
<input type="button" id="off1" class="toggle" value="jackets">
<input type="button" id="off2" class="toggle" value="shirts">
<input type="button" id="off3" class="toggle" value="tops/sweaters">
<input type="button" id="off4" class="toggle" value="sweatshirts">
<input type="button" id="off5" class="toggle" value="pants">
<input type="button" id="off6" class="toggle" value="hats">
<input type="button" id="off7" class="toggle" value="bags">
<input type="button" id="off8" class="toggle" value="accessories">
</div>
To remove on class on sibling elements you can create one function that will return sibling nodes of clicked element and remove on class from each of those sibling nodes.
function getSiblings(el, nodes) {
return [...nodes].filter(node => node != el)
}
document.querySelectorAll('.toggle').forEach(function(button) {
button.addEventListener('click', function() {
this.classList.toggle('on');
getSiblings(this, this.parentNode.children).forEach(function(button) {
button.classList.remove('on');
})
})
})
input {
width: 95px;
float: left;
font-size: 12px;
border-radius: 2px;
margin: 5px;
padding: 3px;
}
.toggle {
background-color: #101820FF;
color: #fff;
border: 1px solid white;
}
.on {
background-color: #FEE715FF;
color: #101820FF;
border: 1px solid #FEE715FF;
}
<div class="item-toggle-group">
<input type="button" id="off1" class="toggle" value="jackets">
<input type="button" id="off2" class="toggle" value="shirts">
<input type="button" id="off3" class="toggle" value="tops/sweaters">
<input type="button" id="off4" class="toggle" value="sweatshirts">
<input type="button" id="off5" class="toggle" value="pants">
<input type="button" id="off6" class="toggle" value="hats">
<input type="button" id="off7" class="toggle" value="bags">
<input type="button" id="off8" class="toggle" value="accessories">
</div>
You should not be modifying the ID of your button elements - once two are turned on, you have two elements with the same ID of 'on'. At this point, when you turn any of them off, only the first element with the ID of 'on' is being set back to the off state (not necessarily the one you clicked to turn off).
Easiest fix is to modify the class of these button elements (not the ID) using:
document.getElementById("off5").className = "on";
Then also change your CSS to style by class, not by ID
.on { /* styles here */ }
not
#on { /* styles here */ }
Use classes instead. Then you only need one function. When you click a button remove the on class from all the elements and then add it to this element
function highlight() {
items.forEach(function(item) {
item.classList.replace('on', 'off');
});
this.classList.replace('off', 'on');
}
var items = document.querySelectorAll(".off");
items.forEach(function(item) {
item.addEventListener("click", highlight);
});
input {
width: 95px;
float:left;
font-size: 12px;
border-radius: 2px;
margin: 5px;
padding: 3px;
}
.off {
background-color: #101820FF;
color: #fff;
border:1px solid white;
}
.on {
background-color: #FEE715FF;
color:#101820FF;
border: 1px solid #FEE715FF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="item-toggle-group">
<input type="button" class="off" value="jackets">
<input type="button" class="off" value="shirts">
<input type="button" class="off" value="tops/sweaters">
<input type="button" class="off" value="sweatshirts">
<input type="button" class="off" value="pants">
<input type="button" class="off" value="hats">
<input type="button" class="off" value="bags">
<input type="button" class="off" value="accessories">
</div>
</body>
</html>
I'd recommend using element.classList.toggle('toggle-class')
function doToggle(event) {
event.target.classList.toggle('toggled');
}
var toggleInputs = document.getElementsByTagName('input');
for(var index in toggleInputs) {
toggleInputs[index].onclick = doToggle;
}
.toggled {
background: green;
}
<input type="button" value="toggle me 1"><br>
<input type="button" value="toggle me 2"><br>
<input type="button" value="toggle me 3"><br>
<input type="button" value="toggle me 4"><br>
<input type="button" value="toggle me 5"><br>
<input type="button" value="toggle me 6"><br>
I am designing a website and I want to show the content just when they click on a button and hide when they click again.
I was able to find a solution but I have to write a different function for all buttons. I tried a few things but couldn't make it. I'll be so glad if you help me. ;)
I hide the buttons by display: none; and the button works with this function :
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
I have to write a different function for all button.
is there a way that I use this for all?
I tried this but it didn't work :
function funcategory(x) {
var a = document.getElementById(x);
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
and here's the content which has to be shown whrn the button click(and be hiden when clicked again):
<!--category------------------------------------------------->
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
here is the main button:
<button id="topbtn" onclick="funcategory()">Category</button
here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
First of all id cannot be duplicate. You can use class as an alternative. and use document.querySelectorAll to get all the buttons. Also add an attribute data-type you can name it any thing but has to have data- as prefix & data-button value will be used to target the section which will be hidden/shown. For example check the data-type of the section. After that you can use classList.toggle which will hide/remove class to toggle the visibility
document.querySelectorAll('.topbtn').forEach(function(item) {
let getBtnData = item.dataset.button;
item.addEventListener('click', function(e) {
document.querySelector('[data-type="' + getBtnData + '"]').classList.toggle('visibility')
})
})
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#category {
display: none;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
display: none;
}
.visibility {
display: block !important;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button class="topbtn" data-button='contact'>Contact us</button>
<button class="topbtn">Random</button>
<button class="topbtn" data-button='category'>Category</button>
<!--<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>-->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category" data-type='category'>
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus" data-type='contact'>
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
function funcategory(elem) {
if (elem.style.display === "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
}
<div id="category">
<center>
<button id="categorybtn" onclick="funcategory(this)">Actors</button>
<button id="categorybtn" onclick="funcategory(this)">Singers</button>
<button id="categorybtn" onclick="funcategory(this)">Instagram user</button>
<button id="categorybtn" onclick="funcategory(this)">Model</button>
<button id="categorybtn" onclick="funcategory(this)">Others</button>
<button id="categorybtn" onclick="funcategory(this)">XXX</button>
</center>
</div>
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
you want to show the content when the Category button is clicked and you want to hide the content if the category button is clicked again. Is that what you want ?
If so instead of checking
if (a.style.display === "none")
you can check as
if (a.style.display === "")
If you want to avoid javascript all together, you can do this with a check box and some fancy css.
Here we use the label tag with an associated check box. Clicking the label toggles the status of the checkbox. We can then use the :checked pseudo class with ~ , the Adjacent sibling selector to toggle display:none;
/*This is the magic - Hide the div next to a checkbox that is checked.
It will show when unchecked courtesy of the associated label */
.toggler:checked + div {
display:none;
}
/*HIde our toggling checkboxes*/
.toggler {display:none;}
body {
background-color: #ff5993;
}
.centered {
text-align:center;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<div class="centered">
<label class="topbtn" for="cb-contact">Contact us</label>
<label class="topbtn">Random</label>
<label class="topbtn" for="cb-category">Category</label>
</div>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-category" class="toggler" checked />
<div id="category" data-type='category' class="centered">
<button class="categorybtn">Actors</button>
<button class="categorybtn">Singers</button>
<button class="categorybtn">Instagram user</button>
<button class="categorybtn">Model</button>
<button class="categorybtn">Others</button>
<button class="categorybtn">XXX</button>
</div>
<!--contact us----------------------------------------------->
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-contact" class="toggler" checked />
<div id="contactus" data-type='contact' class="centered">
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</div>
You should also note the center tag is obsolete and should no longer be used. Use CSS instead. And as everyone else has mentioned, id must be unique on the page, use classes instead.
1) Don't use the same id to define elements, it must be unique in a document..
2) You can send the id: onclick="funcategory(this.id)" to differentiate which one you want to manipulate.
3) Example of reusable function:
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
4) You forgot to close center tag. Which are obsolete by now, alternatively you could use CSS text-align: center;
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorycontent {
display: none;
}
#contactcontent {
background-color: #dddddd;
font-size: 25px;
display: none;
}
<script>
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button id="contact" class="topbtn" onclick="funcategory(this.id)">Contact us</button>
<button id="random" class="topbtn">Random</button>
<button id="category" onclick="funcategory(this.id)" class="topbtn">Category</button>
<button id="all" class="topbtn">All</button>
<button id="mine" class="topbtn">Mine</button>
<button id="top" class="topbtn">Top</button>
<button id="login" class="topbtn">Log in</button>
<!-- do not ^^^ use same id -->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="categorycontent">
<center>
<button id="actor" class="categorybtn">Actors</button>
<button id="singer" class="categorybtn">Singers</button>
<button id="iguser" class="categorybtn">Instagram user</button>
<button id="label" class="categorybtn">Model</button>
<button id="other" class="categorybtn">Others</button>
<button id="xxx" class="categorybtn">XXX</button>
<!-- do not ^^^ use same id -->
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactcontent">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</center>
<!-- << notice missing / >
</div>
I have spent a good amount of time researching this question, but i cannot seem to find an answer.
I am simply trying to change the color of my buttons as i click on them. Currently, the buttons register, but does not recognize a change in the background color. The code goes through and filters data as well, hence the extra additional function. I know this is extremely simple, but I cant seem to identify the button background and change it!
CSS:
.button {
position: relative;
width: 70px;
padding: 5px 5px;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
text-align: center;
font-size: .65em;
border: .5px solid #e0e0e0;
float: left;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(255, 255, 255);
}
.button:hover {
background: #e0e0e0;
}
.button.current {
background: #242424;
color: #fff;
}
HTML:
<div class="buttons">
<div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1')">Button 1</div>
<div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2')">Button 2</div>
<div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3')">Button 3</div>
<div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4')">Button 4</div>
</div>
Javascript:
// Shared function
function filterData() {
var newData = _(site_data).filter(function(site) {
return site[buildingType] < minYear;
});
displaySites(newData);
return newData.length;
}
function buttonClick(filterField) {
if (filterField !== undefined) {
//console.info('Changing building filter to', filterField);
buildingType = filterField;
}
//console.info('Applying filter');
filterData();
//click to change color of button background
var backgroundColor = document.getElementById('option')
function buttonClick(backgroundColor) {
if (backgroundColor.onclick == true) {
option.style.backgroundColor = "#0fe417";
} else {
option.style.backgroundColor = "#0029ff";
}
}
}
i just pass the element to the function and change the background color:
[Update with color reset!!]
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
<div class="buttons">
<div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1',this)">Button 1</div>
<div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2',this)">Button 2</div>
<div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3',this)">Button 3</div>
<div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4',this)">Button 4</div>
</div>
<style> .button {
position: relative;
width: 70px;
padding: 5px 5px;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
text-align: center;
font-size: .65em;
border: .5px solid #e0e0e0;
float: left;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(255, 255, 255);
}
.button:hover {
background: #e0e0e0;
}
.button.current {
background: #242424;
color: #fff;
}
</style>
<script>
// Shared function
function filterData() {
//just comment for hide a error
//var newData = _(site_data).filter(function(site) {
// return site[buildingType] < minYear;
//});
//displaySites(newData);
//return newData.length;
}
function buttonClick(filterField,element) {
element.style.backgroundColor ="red"
var backgroundColor = document.getElementById('option');
buttonClickColor(backgroundColor,element);
if (filterField !== undefined) {
//console.info('Changing building filter to', filterField);
buildingType = filterField;
}
//console.info('Applying filter');
filterData();
//click to change color of button background
function buttonClickColor(backgroundColor,element) {
//reset color
Array.from(document.getElementsByClassName("button")).forEach(function (button,index){
button.style.backgroundColor = "white";
})
if (backgroundColor.onclick == true) {
element.style.backgroundColor = "#0fe417";
} else {
element.style.backgroundColor = "#0029ff";
}
}
}
</script>
const buttons = [...document.querySelectorAll(".button")];
buttons.forEach(item => {
item.addEventListener("click", e => {
console.log(e.target.dataset.val)
buttons.forEach(item => {
item.classList.remove("current");
});
e.target.classList.add("current");
filterData(); //and other code...
});
});
use e.target.dataset instead buttonClick('b2')