don't know @wheelhot should take care about it. here a good article about it: https://www.sitepoint.com/event-bubbling-javascript/
Sorry, just woke up. Thanks! @sorinr @HeinousTugboat and @ezioda004 , I’ll give it a look and maybe I’ll give this code so you all understand my question better
<!—the li are “buttons” in the page—>
<ul>
<li>Unit 1</li>
<li>Unit 2</li>
<li>Unit 3</li>
</ul>
So how can I make JS to recognise which of the li is clicked, cause at the moment, when I use eventlistener, it’ll display all the li elements eventhough I just click on Unit 1. Do I have to create an ID/Class for each of the li? And wouldn’t this be difficult if you have 1000 links and having to create an ID for each of the li?
wheelhot sends brownie points to @heinoustugboat and @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
:cookie: 380 | @ezioda004 |http://www.freecodecamp.org/ezioda004
<ul>
and discriminate what I do with the event based on Event.target
.
wheelhot sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
<ul id="filterStatus">
<li>ALL</li>
<li class="inactive">ONLINE</li>
<li class="inactive">OFFLINE</li>
</ul>
var filterStatus = document.getElementById("filterStatus");
filterStatus.addEventListener('click', function () {
var li = document.getElementsByTagName('li');
console.log(li.target);
}, false);
var filterStatus = document.getElementById("filterStatus");
filterStatus.addEventListener('click', function (ev) {
console.log(ev.target);
}, false);
target
field to the element that caused the event.
<li>
, the browser will generate a MouseEvent
with the click
type, hand it off to the <html>
element, and then pass it down parent-to-child until it hits the <li>
. Once the <li>
handles it, it'll then return it back up to its parent element.
Event.currentTarget
is the element that's currently looking at the Event.
<body>
, and the same handler to every <li>
, you can verify whether the handler's <li>
currently getting the event from one of the <li>
elements or from the <body>
element, but all of them will know which element was actually clicked.
Oh yeah, when you said
NP! And yeah, with event handlers, you pretty much want to stick with the event that's passed in through the parameters.
Care to explain a lil further? As I’m quite blur on these stuffs
border: 1px solid black;
display: block;
margin: 0 auto;
max-width: 100%;
}
.header{
text-align: center;
}
.cell{
background-color: black;
height: 10px;
width: 10px;
display: inline-block;
}
Element.addEventListener('someEventType', someCallbackFunction,duringCapturePhaseOrNot)
.container{
border: 1px solid black;
display: block;
margin: 0 auto;
max-width: 100%;
}
.header{
text-align: center;
}
.cell{
background-color: black;
height: 10px;
width: 10px;
display: inline-block;
}
theres a little bit of gap between the top border and a cell i create, how do i remove this gap
So with any event, you can do this:
Element.addEventListener('event', (ev) => console.log(ev));
and inspect the actual event from console.
ev
object that gets passed to your callback function.
filterStatus.addEventListener('click', function (ev) {
console.log(ev.target);
}, false);
wheelhot sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
function() { console.log(arguments); }
just so I could see WTF I was even getting handed.
display: block
, they sit snug in the corner.
display: flex
, display: grid
, line-height: 10px
, or float those bad boys.
james-n-m sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
arr
a declared variable?
console.log()
literally just prints out whatever you pass to it.
arr
and hit enter?
console.log()
and b.) looking for its output?
ctrl+shift+K
ssheorain sends brownie points to @heinoustugboat and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
:star2: 3675 | @khaduch |http://www.freecodecamp.org/khaduch
ssheorain sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Browser Support
Last 2 Versions FF, Chrome, Safari Mac
IE 11+
Android 4.4+, Chrome for Android 44+
iOS Safari 7+
Microsoft Edge 12+
Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.
<tr>
would do anything to another one. Events don't propagate to siblings.
bourget1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1389 | @sorinr |http://www.freecodecamp.org/sorinr
who can help me
Why webpack pack whole element-ui when I useimport { Carousel, CarouselItem, Button } from 'element-ui'
36.739999999999995.toFixed(2)
coderprans sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @ezioda004 |http://www.freecodecamp.org/ezioda004
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2136 | @heroiczero |http://www.freecodecamp.org/heroiczero
// checks if user satisfied sequence after each button press
jmatty16 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 959 | @mot01 |http://www.freecodecamp.org/mot01
``
for(var i = "#"; i.length < 8; i++){
console.log(i);
i+=i;
}
``
koderkid1936 sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
for(var i = "#"; i.length < 8; i++){
console.log(i);
i+=i;
}
"#"++
even do in JavaScript? Is that a legal operation?
"#"
isn't a number, and can't be incremented.
"#"++
in the console gives me Uncaught ReferenceError: Invalid left-hand side expression in postfix operation
var a = "#"
while(a.length < 8 ){
console.log(a);
a+=a;
}
why does this work? its the same thing
i
is a variable that contains the #
, it is printing it as a character, because the initial value of i
is used in the loop without any modifications.
for (var i = 0; i < 10; i++) {
doSomething();
}
/////////////////////////
var i = 0;
while (i < 10) {
doSomething();
i++;
}
koderkid1936 sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
koderkid1936 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3676 | @khaduch |http://www.freecodecamp.org/khaduch
var i = "#";
while( i.length < 8){
console.log(i);
i+=i;
i++; // Here you're incrementing a string
}
var i = "#";
and then i++
it returns NaN
... your actual mileage may vary, I supposed, depending on the JS engine that is running?
NaN
is used in various scenarios
i = "#"; i++
sets isNaN(i)
, and NaN.length
is undefined.. and undefined < Number
is false
, breaking the condition.
#
##
###
####
#####
######
#######
I've made this pattern using the while loop now they asked me to create this pattern:
#
##
###
####
#####
######
#######
######
#####
####
###
##
#
My question is, do I have to use 2 loops, like a loop inside a loop, loopception ???
for
or while
. You could do it in 1 while
or 2 for
s.
@Koderkid1936
let d,g,i=2;while(!g){console.log(Array(i).join('#'));g=i<=1&&!g;d=i==9||d;d?i--:i++}
86 characters. Not sure if I can get it any shorter.
let d,g,i=2;while(!g){console.log(Array(i).join('#'));g=i<2&&!g;d=i==9||d;d?i--:i++}
for
loop is the same length as the while
.
for(let d,g,i=2;!g;g=i<2&&!g,d=i==9||d,d?i--:i++)console.log(Array(i).join('#'))
..and it's a for loop.
for(let d,i=2;i>1;d=i==9||d,d?i--:i++)console.log(Array(i).join('#'))
let attack = document.querySelector('#attack');
attack.addEventListener('click', console.log('test'));
addEventListener
.
undefined
, not a function for it to execute.
console.log('test')
resolves to undefined
and then you hand it to the event listener. So you want to give it a function to call instead.
var a = "#";
while(a.length < 8){
if(a.length <=8){
console.log(a);
a+=a;
}else{
a-=a;
}
}
var a = "#";
while(a.length < 14){
if(a.length <=7){
console.log(a);
a+="#";
}else{
a-="#";
}
}
.slice
or .substring
to get something that will return a portion of the string.
var a = "#";
while(a.length < 14){
if(a.length <=7){
console.log(a);
a+="#";
}else{
a-="#";
}
}
a.length
will start to shrink when you start removing "#".
a-="#"
actually works.
#
I think.
#F823DE
.
F823DE
or whatever.
randColor = '#' + Math.floor(Math.random() * 0xFFFFFF);
kimberlyduclos sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
randColor = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6,0);
Math.floor()
returns a decimal, so you need to convert it back to Hex.
var a = "#";
while(a.length <= 7){
if(a.length < 7){
console.log(a);
a+="#";
}else{
//assuming this works
}
}
objA.prop === objB.prop
?
var a = "#";
var counter = 0
while(counter < 12){
if(a.length < 7){
console.log(a);
a+="#";
}else{
//assuming this works
}
counter++;
}
g-4-r-y sends brownie points to @ehutchllew :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @ehutchllew |http://www.freecodecamp.org/ehutchllew
console.log('else')
in that else block and run it. See what happens. :-D
#
##
###
####
#####
######
@HeinousTugboat that's the result
var a = "#";
var counter = 0
while(counter < 12){
if(a.length <= 7){
console.log(a);
a+="#";
}else{
//assuming this works
}
counter++;
}
code so far
koderkid1936 sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
<_< And take this for the road:
for(i=7;i>-8;i--)console.log(Array(9-(i<0?-i:i)).join('#'))
;-)