Skip to content

Latest commit

 

History

History
198 lines (133 loc) · 3.73 KB

lesson10.md

File metadata and controls

198 lines (133 loc) · 3.73 KB

Basic Frontend

Lesson 10

Recap: DOM?

It defines

  • the structure of (HTML) documents
  • the way a document is accessed and manipulated
<input type="text" value="hello" />

How can I get this input element in JavaScript?

<input type="text" value="hello" id="myInput" />
let input = document.getElementById("myInput");
input.value = "world";

Homework solution

<body>
  <input type='text' id='colorInput' />
  <button onclick='setBackground()'>Change!</button>
  <div id='myDiv'>Hello!</div>

  <script src='main.js'></script>
</body>
function setBackground() {
  let inputElement = document.getElementById("colorInput");
  let color = inputElement.value;
  let divElement = document.getElementById("myDiv");
  divElement.style.backgroundColor = color;
}

Exercise

remove the value from the input field after the user presses the button.

solution

function setBackground() {
  let inputElement = document.getElementById("colorInput");
  let color = inputElement.value;
  let divElement = document.getElementById("myDiv");
  divElement.style.backgroundColor = color;
  inputElement.value = ''; // this removes the value
}

Setting the text

If we want to add or change any text, we can use textContent

Example:

let myElement = document.getElementById("myId");
myElement.textContent = "I changed the text!";

Exercise

Change the text content of the div to the color that the user choose!

solution

function setBackground() {
  let inputElement = document.getElementById("colorInput");
  let color = inputElement.value;
  let divElement = document.getElementById("myDiv");
  divElement.style.backgroundColor = color;
  input.value = '';
  divElement.textContent = color; // now we changed the text!
}

Okay, lets add more stuff to our small page.

We want to show all the colors that the user has chosen.

Lets start be adding an unordered list.

<body>
  <input type='text' id='colorInput' />
  <button onclick='setBackground()'>Change!</button>
  <div id='myDiv'>Hello!</div>
  <ul id='colorList'></ul>

  <script src='main.js'></script>
</body>

We can create HTML elements using document.createElement.

for this page, we want to create list item or li;

// we put the tag in the () of createElement
let itemElement = document.createElement("li");
itemElement.textContent = "I am new item!";

Try it!

Unfortunately, the element is not on the page.

We have to tell the browser where to put it.

We do that using appendChild:

let itemElement = document.createElement("li");
itemElement.textContent = "I am new item!";

let listElement = document.getElementById("colorList");
//this means add itemElement as a child of listElement
listElement.appendChild(itemElement);

We want to show the color that the user has choose in our item that we created.

What do we have to do?

itemElement.textContent = color;

exercise

Change the background color of the item to the color!

itemElement.style.backgroundColor = color;

exercise

When we click on an item in our list, we want to change the background color of the div to that of the item.

itemElement.onclick = function () {
  divElement.style.backgroundColor = color;
};