I wanted to create an original piece of code which did something.<\/p>\n
And I did with Chop Wood<\/a>.<\/p>\n Something simple, but something which took an input and then changed an attribute on the DOM. Or is it “element”, I am still not well versed in javaspeak.<\/p>\n This week has all been about learning a few simple things to the point of where I could actually use them:<\/p>\n I have spent 7 days or more studying the above, in various youtube video tutorials, books and wikis. All I wanted to do was present and object with a variable, click on that object which reduces that variable by one and then changes another variable. I then wanted the variable that had been changed to be clicked on and change again, as well as changing another variable and so on. It seems simple, well I thought it did and found it incredibly hard, but I stuck with it. Although causing my family to emit radioactive death rays towards me as I wouldn’t stop going on about it. Ever been there?<\/p>\n One of the problems is the much talked about issue of function variables and global variables, I thought it would be easy to pass a variable which originated in a function to play in the global scope, no no no, can’t do that. <\/p>\n I read you could create the variable outside the function and then pass it in, but still I couldn’t get it to work.<\/p>\n I then found a work around and came up with this: \/\/Tree counting function if (count <= 0) {\n alert(\"You are out of trees, dumb dumb. Go find some more.\");\n return\n } else {\n count--;\n document.getElementById('tree-score').innerHTML = count;\n\n logfun++;\n document.getElementById('log-score').innerHTML = logfun;\n }\n\n});<\/code><\/p>\n I absolutely expect there to be an easier work around and may even be schooled by another javascript noob, which I am fine with this. I have only been serious about learning javascript for a few months so any criticism from coders more experienced than me is welcome.<\/p>\n I still can't wrap my head around where the variable of \"count\" actually lives, is it on the DOM or is it in the script. And is a global variable(I assume it is) or a function variable?<\/p>\n I have read a number of code examples of global vs function variables and become even more confused, but I know clarity will come. As it has somewhat with querySelector and getElementById and I get a kick out of manipulating the DOM with them. My question is, why bother with getElementById anymore. Is it just habit that people still use it?<\/p>\n Also, getting to grips with ES6, which seems the wise thing to do. All the old tutorials still use var, whilst I am focusing on only using let and cost. Which seems to be the perceived wisdom. I realise it is worth getting to know the old way of doing things, especially if working on legacy cod.<\/p>\n So go look at what I did, yes, it will take you 17 seconds to get it and then get bored, but I am so proud that I got it to work. Real agony was spent on this.<\/p>\n I have new things to add updates to the Chop Wood game, which will continue my learning, like:<\/p>\n A long way to go yet, but I have set myself the goal of learning javascript this year. I expect the above to take another 3 -4 months to complete. But I love learning this stuff and creating something where nothing existed before, even if the actual thing is so simple.<\/p>\n Any comments or suggestions please make them in the comments. Would love to hear feedback.<\/p>\n Chop Wood<\/a><\/p>\n Thanks to the Youtube channels of Brad Traversy<\/a> and Dylan Isreal<\/a>, I bought Brad's Modern Javascript course from Udemy, highly recommend it.<\/p>\n","protected":false},"excerpt":{"rendered":" I wanted to create an original piece of code which did something. And I did with Chop Wood. Something simple, but something which took an input and then changed an attribute on the DOM. Or is it “element”, I am still not well versed in javaspeak. This week has all been about learning a few … Continue reading 7 Days of Javascript hell over a few lines of code<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/40"}],"collection":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":2,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/40\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\nCascading the effect down a list of objects.<\/p>\n
\n
\nlet treecard = document.querySelector('.this-tree'),
\n count = 10,
\n logfun = 0;<\/p>\n
\ntreecard.addEventListener('click', function() {
\n \/\/tree<\/p>\n\n