1.3.05 Missing how to play with these in the console

Hi Zac!

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.

Thanks again!
Gillian

Hi Zac,
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.

🙂

Hi Jose! Thanks for your help but I couldn’t see the broken image? 🙂

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
* 1.3.5.4
*
*******************************/

//
// var content = document.querySelector( ‘.content’ ),
// newOuterHTML;

// 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!
Gillian

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!