<div class="display"></div>can be selected as follows:
document.querySelector(".display");would select the div above.
const div = document.createElement('div');will create a div element. However, this div has not been added to the webpage yet.
div.style.color = 'blue';adds the indicated style rule
div.setAttribute('id', 'theDiv');sets the id attribute of our div to
<button onclick="alert(this.tagName)">Click Me</button>
<div class="display"></div>is a "child" of
<div id="container"></div>and a sibling to
<div class="controls"></div>. Think of it like a family tree.
<div id="container"></div>is a parent, with its children on the next level, each on their own "branch".
lastElementChildetc.) with special properties owned by the nodes.
[options]in this case means you can add some optional parameters to the function. Don't worry about these at this point.
containerdiv that already exists in our HTML. Then we create a new div and store it in the variable
content. We add a class and some text to the
contentdiv and finally append that div to
<p>with red text that says "Hey I'm red!"
<h3>with blue text that says "I'm a blue h3!"
<div>with a black border and pink background color with the following elements inside of it:
<h1>that says "I'm in a div"
<p>that says "ME TOO!"
<p>to it before adding it to the container.
ein that function is an object that references the event itself. Within that object you have access to many useful properties and functions such as which mouse button or key was pressed, or information about the event's target - the DOM node that was clicked.
querySelectorAll('selector'). In order to add a listener to each of them we simply need to iterate through the whole list like so:
playRoundfunction with the correct
playerSelectionevery time a button is clicked. (you can keep the console.logs for this step)
divfor displaying results and change all of your
console.logs into DOM methods.