learn-co-curriculum / phase-0-javascript-events-event-listening-lab Goto Github PK

Canvas Link

https://learning.flatironschool.com/courses/5631/assignments/175600?module_item_id=385684

Concern

The id of the input on the HTML is not the same as the id the test file expects.

Additional Context

No response

Suggested Changes

In the HTML file (line 20) you can either change the Id of the input element to "input" or you can change the test file (line 7) expected id on the input to "button"

Canvas Link

https://learning.flatironschool.com/courses/5192/assignments/185948?module_item_id=413207

Concern

I just think the lab could be improved if you added an event listener to a button and then triggered a button rather than an input box

Additional Context

No response

Suggested Changes

No response

Canvas Link

https://learning.flatironschool.com/courses/5298/assignments/168040?module_item_id=363097

Concern

student was failing test because the id that is given on the html element that is being queried by test is set to button whereas the test queries for input

FIX: change the id='button' to id='input' in index.html

Additional Context

No response

Suggested Changes

FIX: change the id='button' to id='input' in index.html

Canvas Link

https://my.learn.co/courses/355/assignments/16574?module_item_id=38484

Concern

Canvas references element id "input" in code snippet and elsewhere. The correct element id is "button". It's referenced correctly in the readme.md in GitHub for this lesson.

Now when you click inside of input#input, you will get an alert box. Should be input#button

Additional Context

No response

Suggested Changes

const input = document.getElementById('button');

In the lesson in Canvas the code includes const input = document.getElementById("button") and instructs students to copy & paste the code into the console in the browser and VS Code in order to pass the test. However, the button's Id is "input" in index.html, not "button" so an error pops up. Not sure if this is intentional or not, but wanted to flag it just in case.

Fork button is linking to portal.flatironschool.com instead of github on the course page in learn.co.

Thanks for raising this issue! Future learners thank you for your diligence. In
order to help the curriculum team address the problem, please use this template
to submit your feedback. We'll work on addressing the issue as soon as we can.

Please fill out as much of the information below as you can (it's ok if you
don't fill out every section). The more context we have, the easier it will be
to fix your issue!

Note: you should only raise issues related to the contents of this lesson.
If you have questions about your code or need help troubleshooting, reach out to
an instructor/your peers.

Link to Canvas

Add a link to the assignment in Canvas here.

Describe the bug

initial npm test results in this:

$ npm test

[email protected] test
mocha --timeout 5000 -R mocha-multi --reporter-options spec=-,json=.results.json

1. "before all" hook

0 passing (7s)
1 failing

1. "before all" hook:
   Error: Timeout of 5000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
   at Object.done (node_modules/mocha-jsdom/index.js:70:7)
   at /mnt/d/Programming/FlatironSchool/code/phase0/phase-0-javascript-events-event-listening-lab/node_modules/jsdom/lib/jsdom.js:312:18
   at processTicksAndRejections (node:internal/process/task_queues:78:11)

Write a clear and concise description of what the bug is. Include the file and
line number(s) if possible.

What is the expected behavior?

Write a clear and concise description of what you expected to happen.

Screenshots

If applicable, attach screenshots to help explain your problem.

What OS are you using?

• OS X
• WSL
• Linux

Any additional context?

Add any other context about the problem here.

Canvas Link

https://learning.flatironschool.com/courses/5185/assignments/179292?module_item_id=396166

Concern

This phrasing seems backwards:
We could then hook up as many elements as we'd like to our clickAlert.

It seems like we are able to attach our cool function to lots of different elements/events rather than attach events to the function. Is this saying that under the covers, the clickAlert function object maintains a list of all the elements it is hooked to?

Additional Context

No response

Suggested Changes

Instead of this:
We could then hook up as many elements as we'd like to our clickAlert.

it seems like the flow is more like:
We could then hook up our clickAlert function to as many elements as we'd like.

Are the callbacks attached to elements or to events?
If I'm missing this, maybe a deeper explanation is needed. :-)

Canvas Link

https://learning.flatironschool.com/courses/5192/assignments/185948?module_item_id=413207

Concern

const input = document.getElementById('button');

Additional Context

No response

Suggested Changes

The id isn't 'button' , it should be 'input' for this to work. The code that we need to copy and paste from the README/canvas module still has 'button' for the const input

Canvas Link

https://learning.flatironschool.com/courses/4978/assignments/167576?module_item_id=362197

Concern

The answer solution of the lesson has

const input = document.querySelector('button')

The id of this element is "input".

Additional Context

Suggested Changes

1. We can change the answer key to be "input" instead of it saying button.

or

2. We can change the id of the button to "button" (this is line 20).

Canvas Link

https://learning.flatironschool.com/courses/5292/assignments/179703?module_item_id=396882

Concern

There doesn't appear to be a button element but I might be wrong as I'm still learning

Additional Context

const input = document.getElementById('button');
input.addEventListener('click', function() {
alert('I was clicked!');
});

VM1327:2 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at :2:7

Suggested Changes

add a button element

Canvas Link

https://learning.flatironschool.com/courses/5300/assignments/179744?module_item_id=397074

Concern

There was an error in the test. It should read:
input = document.getElementById('button');

Additional Context

No response

Suggested Changes

There was an error in the test. It should read:
input = document.getElementById('button');

Canvas Link

https://learning.flatironschool.com/courses/5292/assignments/179703?module_item_id=396882

Concern

The input element is input#input, not input#button, when you copy and paste the provided code from the first code block it returns an error in Chrome DevTools console... unless you switch getElementById to:

const input = document.getElementById('input');

Additional Context

No response

Suggested Changes

const input = document.getElementById('input');
input.addEventListener('click', function() {
alert('I was clicked!');
});

Canvas Link

https://learning.flatironschool.com/courses/5192/assignments/185948?module_item_id=413207

Concern

In this lesson, it refers to the Id as 'button' but in the code from the repo, the Id is 'input'

Additional Context

No response

Suggested Changes

No response

Canvas Link

https://learning.flatironschool.com/courses/5639/assignments/179041?confetti=true&submitted=0

Concern

Code:

function addingEventListener() {
    const input = document.getElementById('button');

    input.addEventListener('click', () => {
        document.getElementsByTagName('div')[1].remove();
    });
}

The above code doesn't run in the browser. However, removing the nested code from the addingEventListener() function allows it to run successfully.

Additional Context

No response

Suggested Changes

No response

Canvas Link

https://learning.flatironschool.com/courses/5298/assignments/168040?confetti=true&submitted=0

Concern

In the IndexTest.js code, the test calls for one variable, but the js code that we are told to paste has a different variable.

Additional Context

No response

Suggested Changes

Make the variable in the indexTest.js the same as index.js