Issue
I have some familiarity with the … operatorspread syntax
and recently I saw a developer use the spread syntax (as attached in snippet as ) […document.querySelectorAll(‘#wrapper button’)].map((button)=> button.addEventListener(‘click’,Add));
the above … spread syntax with the map function looks tough for me to understand, can someone help me understand it in simple terms conceptually..thanks for your time
document.addEventListener('DOMContentLoaded', () => {
var temp = [];
var arrayOfStrings = [];
console.log(document.querySelectorAll('#wrapper button')) //choose button only in the wrapper div and not the others like CLR
//listen to only button events(other than the CLR)
document.querySelectorAll('#wrapper button').forEach(button => button.addEventListener('click', Calculat));
//listen to CLR button events
document.getElementById('clear1').addEventListener('click', () => {
temp = [];
arrayOfStrings = [];
document.querySelector('.my_flex').textContent = ('');
});
function Calculat(e) {
z = e.target.innerText;
// console.log(z);
document.querySelector('.my_flex').append(z); //append to the flex object
if (z == '=') {
document.querySelector('.my_flex').append(eval(arrayOfStrings));
return false;
}
temp.push(z);
arrayOfStrings = temp.join("");
}
});div {
width: 7cm;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
/*align the text f the button to the center*/
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
.my_flex {
display: flex;
background-color: tomato;
margin: 8px;
padding: 20px;
font-size: 30px;
}<a>Calculations(Simple Mathematics only, example: 1+7,2*8 etc):--</a>
<div id="wrapper">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>0</button>
<button>(</button>
<button>)</button>
<button>/</button>
<button>=</button>
<button>.</button>
</div>
<div><button id="clear1">CLEAR</button></div>
<div class="my_flex">
<!--just to get nice output on flex canvas -->
</div>Solution
It’s not just pointless to use the array spread syntax here, it’s also pointless (and indeed confusing) to use map. This should rather use the forEach method:
document.querySelectorAll('#wrapper button').forEach(button => {
button.addEventListener('click', calculate);
});
or even better just a simple for loop:
for (const button of document.querySelectorAll('#wrapper button')) {
button.addEventListener('click', calculate);
}
Answered By – Bergi
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0