+ 1

DOM & Events are too hard to understand in JavaScript.

29th Jul 2020, 11:05 AM
Deepak Sanjaykumar More
Deepak Sanjaykumar More - avatar
16 Answers
+ 5
What is your question?
29th Jul 2020, 11:11 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
+ 4
You have to practice. Try practicing with a mini-projects, such as To-do List. Here is my unfinished To-do List tutorial series, the first lesson explains event associated with input element: https://www.youtube.com/playlist?list=PLkqwj9vc20pUitqvZrLPk-hTNv63EJqwg Don't give up. Keep practicing.
29th Jul 2020, 11:12 AM
Gordon
Gordon - avatar
+ 3
Someone Nice answer Roopesh!
29th Jul 2020, 4:44 PM
Gordon
Gordon - avatar
+ 1
Basic Javascript without any library or framework. Basic Javascript is called vanilla Javascript
29th Jul 2020, 11:17 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
+ 1
document.createElements create elements or tags in this case it is <p> tag or element. document.createTextNode create texts. In this case “some new text” is going to create. p.appendChild(node) means node will be inside p. like <p> node </p>. Here node is created text which is “some new text”. So, p tag will be like this <p> some new text</p> lastly p tag is appended to div. So, it will be <div id="demo"> <p> some new text</p></div>. I hope you understand. https://code.sololearn.com/WDllo92Bxa85/?ref=app
29th Jul 2020, 11:28 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
+ 1
What are your questions about it? You need to be more clear si we can help you. Just drop any question by me and I'll try to answer, although I'm not the best coder lol
29th Jul 2020, 11:52 AM
AquA217
AquA217 - avatar
+ 1
First try to select elements like : HTML: <p id="MyPara">this is a paragraph</p> JS: var myPara = document.getElementById("MyPara"); Output: this is a paragraph Then try to access the text/content in it : var text_in_para = myPara.innerText; var html_in_para = myPara.innerHTML; And manipulate content in it: myPara.innerText = "changed content" Output: changed content I also faced problem in DOM but I slowly became comfortable with it .You will be also become comfortable with it...(events are continued)
29th Jul 2020, 2:29 PM
Roopesh
Roopesh - avatar
+ 1
Have you watched lesson 1 of the tutorial I linked above?
29th Jul 2020, 2:30 PM
Gordon
Gordon - avatar
+ 1
Now add some events , eg: when one click show how many times one clicked on paragraph: JS: var count = 0; myPara.addEventListener("click", function showClickCount () { count++; myPara.innerText = "you clicked this " + count + " times"; }); addEventListener add an listener to the paragraph element which calls a given function (in this example it is showClickCount) . When we click on paragraph the count variable increases by 1 And second line displays how many times we clicked on the paragraph. Our callback function showClickCount can have a event argument, something like : function showClickCount (event){…} Putting everything together: https://code.sololearn.com/WEpAK7jTyI6w/?ref=app For click events event attribute provide you information about the state at which the event was occurred (like when occurred, where occurred, etc.) But that are little complex and there are dozens of events. But you can start from simple programs and projects like one by Gordon .
29th Jul 2020, 2:58 PM
Roopesh
Roopesh - avatar
+ 1
Cover all concepts in DOM and Events and understand and implement them, I'm sure if you focus in it, you will become master in DOM and Events. We sololearners are here to help you. Always share your questions (before posting your question search it in sololearn, you will get best answers) to us 🙂
29th Jul 2020, 3:00 PM
Roopesh
Roopesh - avatar
0
🇮🇳Vivek🇮🇳 this dom & event lesson has very typical words in it. How to inculcate them?
29th Jul 2020, 11:14 AM
Deepak Sanjaykumar More
Deepak Sanjaykumar More - avatar
0
Deepak Sanjaykumar More can you give examples of typical words?
29th Jul 2020, 11:16 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar
0
Gordon what is vanilla JavaScript
29th Jul 2020, 11:16 AM
Deepak Sanjaykumar More
Deepak Sanjaykumar More - avatar
0
🇮🇳Vivek🇮🇳 window.onload = function() { var p = document.createElement("p"); var node = document.createTextNode("Some new text"); p.appendChild(node); var div = document.getElementById("demo"); div.appendChild(p); };. This are the words than I'm not understanding how to use.
29th Jul 2020, 11:19 AM
Deepak Sanjaykumar More
Deepak Sanjaykumar More - avatar
0
AquA217 That whole lesson & relationship between HTML & JavaScript all hard to inculcate. This are giving headache to understand.
29th Jul 2020, 11:57 AM
Deepak Sanjaykumar More
Deepak Sanjaykumar More - avatar
0
Deepak Sanjaykumar More I try to explain. Did you understand that part?
29th Jul 2020, 11:59 AM
🇮🇳Vivek🇮🇳
🇮🇳Vivek🇮🇳 - avatar