Printing inner HTML of clicked elements to the console

I want to be able write code in the console that allows me to print to the console the inner HTML of any elements I click on within a Web page. This is my code so far.

var findBody = document.querySelector ('body');

function findContent(event) {
findBody.onclick = "findContent(event)";
console.log (event.target.innerHTML);
}

Please be kind, I’m just beginning to write JS. Thanks

This should work:

var findBody = document.querySelector ('body');

function findContent(event) {
console.log (event.target.innerHTML);
}

findBody.onclick = findContent;

Maybe, You can try this snippet:

function find() {
    console.log(event.target.innerHTML);
}
document.onclick = find;

You’ve found body element and written a function. But your function is never called, you have to make browser execute it when event (click) happens.

Basic way to attach event handler is to define on+eventName attribute of the element. Still, it is better to use element.addEventListener method, because you can add as many event listeners to the same element as you want. Also, this method allows to control when event handler is applied during event propagation through the document (nice doc)

Here’s basic solution:

// find body element
var findBody = document.querySelector('body');

// define handler function
function findContent(event) {
  console.log (event.target.innerHTML);
}

// attach event handler
findBody.addEventListener('click', findContent);