October 19, 2016 at 7:27 pm #13111
I’m missing how to play with these in the Console in Inspector in Chrome. I’m able to put in one line of code, but with multiple lines like in your examples, it gives an error.
I realize you’re using an auxiliary file in your examples along with the .html and .css files to run in the browser, but you mention you’re able to play with other live websites.
I would really appreciate some more details on how to do this in the Console to give me more practice.
Thanks in advance!
GillianOctober 19, 2016 at 8:59 pm #13119
You would want to do something like shift + enter for the line breaks to prevent it from executing one line at a time which won’t really be what you want.
You should also be able to paste code blocks into the console and have them work.October 19, 2016 at 9:06 pm #13126
So can you please give me an example of this so that I can go and play properly?
I’m not getting the transfer of knowledge from the js app file which defines variables and so on, to the Console commands which are simpler.
GillianOctober 20, 2016 at 4:06 pm #13150
See if this video helps 🙂
Should explain how to type multiple lines of code in the console.October 20, 2016 at 4:38 pm #13165
Thanks for the video – yes, I did understand how to physically type in the commands.
Where I’m stuck is you defined everything as variables and so on in your examples and have been running the little programs as js along with the html.
You do demonstrate at the beginning of this section how to type in the console as document. etc etc, but later on, you don’t demonstrate exactly what you want us to practice. Sorry if it seems obvious to you …
So I’m assuming we can’t define a variable in the console, therefore, exactly how do you want us to check different things in the DOM?
I feel silly posting this, but if I’m struggling, then someone else might benefit, right? And rather than stay quiet and pretend all is good, I’d rather know how to do this and learn from you all the better through the practice 🙂
Thank for your patience. Even one example of the later work would be helpful – not so much the document. etc because you already showed us how in the video with that.
🙂October 28, 2016 at 3:36 pm #13994JoseParticipant
Is this what you are looking for? Create variables in the console and show the results?October 28, 2016 at 7:30 pm #14019
Hi Jose! Thanks for your help but I couldn’t see the broken image? 🙂October 28, 2016 at 7:34 pm #14026JoseParticipant
Sorry about that.
Regards.October 28, 2016 at 7:42 pm #14033
Hi Jose – thanks for that screenshot! Yes, I can get the results with the document. type of commands, but I want to replicate the exercises that Zac created for his lessons on Getting and Setting, for example. What I want to do is take a new website (not the html file that Zac used, but a random one off the web), and explore it similar to how Zac did it with his html file. Here’s an example from Zac’s exercises:
* Setting outerHTML and outerText
// var content = document.querySelector( ‘.content’ ),
// content.outerHTML = ‘<div class=”content active”>’;
// content.outerHTML += ‘<h1>New Title</h1>’;
// content.outerHTML += ‘<p>Nuevo Lorem</p>’;
// content.outerHTML += ‘</div>’;
// newOuterHTML = ‘<article class=”content active”>’;
// newOuterHTML += ‘<h1>New Title</h1>’;
// newOuterHTML += ‘<p>Nuevo Lorem</p>’;
// newOuterHTML += ‘</article>’;
// content.outerHTML = newOuterHTML;
// content.outerText = ‘All of the new text’;
// console.log( content );
When I put these in, I get errors.
Can you help me see what I’m doing wrong with this approach? I’m sorry if Zac explained how to do this on a random website, but I must have missed it if so. I know he explained how to query the document and that works fine.
Thanks again Jose!
GillianOctober 28, 2016 at 7:43 pm #14040
Of course, I removed the comments // prior to testing, and only tested one set at a time just to clarify 🙂October 31, 2016 at 6:29 pm #14391
Hi @Zac – just wondering if you can read the post prior with more specific questions so I can get going on the practice part of this please. Thanks!November 1, 2016 at 5:07 am #14452
I put together a little video here showing how you can set vars in the console. In this example I’m setting a variable based on an element in the DOM. You can pretty much do anything we do in these exercises in the console as well. [Sorry no sound]
Let me know if this doesn’t answer your question.
In terms of the actual suggestion for practice, I would say try to do some of the same things we do in the video, but just with different sites and types of DOM elements. Notice in this example we have a div with class of content but you will need to match classes, ids or other elements for other sites.
Hope that helps!
- You must be logged in to reply to this topic.