Struggling

[ghost]

Respect to you, this tutorial must have consumed time and resources beyond the ken of a mere mortal such as I. I wondered could I presume to ask for clarification on some detail? I have tried to understand all lines of the code and procedure rather than blindly copypasta, the following has me stumped though: const printTarget = document.getElementsByClassName('debug__output')[0]; does this mean that we are replacing what would have been the debug log output with the results, or am i totally missing something? Also when would the debug log report something and where? Why not just create a div on the body?

Thanks man you are a legend.

[jlengstorf]

Hey, there!

The code you're referencing selects the element we want to print messages into. This script is executed in the index.html file and looks for the code tag with the class name we're searching for.

const printTarget = document.getElementsByClassName('debug__output')[0];

The first part — document.getElementsByClassName — is a function that finds any elements in the DOM with a class matching the argument.

The second part — ('debug__output') — is the argument: we want to find all elements with the class debug__output.

This function returns an array of elements matching the class.

The third part — [0] — selects only the first element from the returned array. This is the value stored in printTarget.

Another way to do this that's less confusing and now supported by modern browsers would be:

const print target = document.querySelector('.debug__output');

To actually print results on the page, we then have these two lines of code:

printTarget.innerText = `sayHelloTo('Jason') => ${result1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;

The first line replaces the element's innerText value with the string to the right of the equals sign.

The second line appends (using +=) the string to the right.

You could add a new div to the page, but you'd still need to figure out where to put it, which would require somewhat similar code. For this example, I decided to go with a hard-coded element.

I'm going to close this issue, but feel free to follow up with any questions.

Thanks for reading!

[ghost]

That's incredibly helpful i now understand the mechanics, just confused as to why there is a class of debug output on the pre tag in the first place? Presumably this class comes from the debug module and is bundled into main.min.js at bundle time? It was available so why not use it or some other reason? Where does debug actually log to? The console? How do i see the output?

sorry to be a pain just my ambition to completely understand rather than just bash on.

[jlengstorf]

It's only for demonstration purposes. It's hard to show bundled code visually, so this is just a way of showing that the bundled code is running the same way the unbundled code runs.

In a real application, you would almost definitely not have something like this in your code.

[ghost]

so so helpful you are def a legend. get an email list going man and make yourself some $$$'s sign me-up!

[jlengstorf]

Haha, I've got an email list for a different kind of blog over at https://lengstorf.com/blog, but I don't make money on that. For now, these tutorials are just a fun thing to do on the side. 😄

Thanks again!

[ghost]

nah m8 you gotta rockup and greet the world- laracasts is way too boring and the canadian is toooo canadian - the world needs you man! Hey one question every time i write a module i get a reference error in browser so i have scope issues if i prefix window. it works on a button click event but that seems shabby is this a side effect of iife or is there a workround? I got your setup working with browsersync which is sweet btw. Soory to be a pain man.

[jlengstorf]

The Canadian?

RE: reference errors and scope issues, that's probably a better question for the Rollup chat or issue board as it falls outside of this tutorial and my expertise. 😄

Good luck!