Replace innerText with textContent

remarcmij · remarcmij · commit 80e09b8884aa · 2019-01-31T13:14:27.000+01:00
diff --git a/src/functions/6-app/app.js b/src/functions/6-app/app.js
@@ -14,7 +14,7 @@
     const root = document.getElementById('root');
     const div = document.createElement('div');
     div.className = 'utterance';
-    div.innerText = message;
+    div.textContent = message;
     root.appendChild(div);
   }
 
@@ -50,11 +50,13 @@
     await eat(hotFood);
   }
 
-  async function main() {
-    await synthesizer.initialize(render);
-    await say("It's lunch time!");
-    await eatLunch(campbellsTomatoSoup);
-    await say('Finished lunch.');
+  function main() {
+    document.getElementById('start').addEventListener('click', async () => {
+      await synthesizer.initialize(render);
+      await say("It's lunch time!");
+      await eatLunch(campbellsTomatoSoup);
+      await say('Finished lunch.');
+    });
   }
 
   window.onload = main;
diff --git a/src/functions/6-app/index.html b/src/functions/6-app/index.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Lunchtime !</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
-  <title>Lunchtime !</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script src="SpeechSynthesizer.js"></script>
-  <script src="app.js"></script>
-</body>
-
-</html>
+  <body>
+    <button id="start">PRESS ME</button>
+    <div id="root"></div>
+    <script src="SpeechSynthesizer.js"></script>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/src/lecture3/util.js b/src/lecture3/util.js
@@ -24,7 +24,7 @@ function createAndAppend(name, parent, options = {}) {
   parent.appendChild(elem);
   for (const key of Object.keys(options)) {
     if (key === 'text') {
-      elem.innerText = options.text;
+      elem.textContent = options.text;
     } else {
       elem.setAttribute(key, options[key]);
     }
diff --git a/src/live/app.js b/src/live/app.js
@@ -22,7 +22,7 @@
     parent.appendChild(elem);
     for (const key of Object.keys(options)) {
       if (key === 'text') {
-        elem.innerText = options.text;
+        elem.textContent = options.text;
       } else {
         elem.setAttribute(key, options[key]);
       }
diff --git a/src/week1/10-final/app.js b/src/week1/10-final/app.js
@@ -22,7 +22,7 @@
     Object.keys(options).forEach(key => {
       const value = options[key];
       if (key === 'text') {
-        elem.innerText = value;
+        elem.textContent = value;
       } else {
         elem.setAttribute(key, value);
       }
diff --git a/src/week1/4-xhr-render/app.js b/src/week1/4-xhr-render/app.js
@@ -25,7 +25,7 @@
       const root = document.getElementById('root');
       const pre = document.createElement('pre');
       root.appendChild(pre);
-      pre.innerText = JSON.stringify(data, null, 2);
+      pre.textContent = JSON.stringify(data, null, 2);
     });
   }
 
diff --git a/src/week1/6-xhr-first/app.js b/src/week1/6-xhr-first/app.js
@@ -26,7 +26,7 @@
       const li = document.createElement('li');
       ul.appendChild(li);
       li.className = 'list-item';
-      li.innerText = `Name: ${laureate.firstname} ${laureate.surname}`;
+      li.textContent = `Name: ${laureate.firstname} ${laureate.surname}`;
     });
   }
 
diff --git a/src/week1/7-xhr-dry/app.js b/src/week1/7-xhr-dry/app.js
@@ -30,7 +30,7 @@
     laureates.forEach(laureate => {
       const li = createAndAppend('li', ul);
       li.className = 'list-item';
-      li.innerText = `Name: ${laureate.firstname} ${laureate.surname}`;
+      li.textContent = `Name: ${laureate.firstname} ${laureate.surname}`;
     });
   }
 
diff --git a/src/week1/8-xhr-dryer/README.md b/src/week1/8-xhr-dryer/README.md
@@ -10,7 +10,7 @@ In the solution of Jim, I really like the flexibility that you can set any attri
 Object.keys(options).forEach(key => {
   const value = options[key];
   if (key === 'text') {
-    elem.innerText = value;
+    elem.textContent = value;
   } else {
     elem.setAttribute(key, value);
   }
diff --git a/src/week1/8-xhr-dryer/app.js b/src/week1/8-xhr-dryer/app.js
@@ -22,7 +22,7 @@
     Object.keys(options).forEach(key => {
       const value = options[key];
       if (key === 'text') {
-        elem.innerText = value;
+        elem.textContent = value;
       } else {
         elem.setAttribute(key, value);
       }
diff --git a/src/week1/9-xhr-table/app.js b/src/week1/9-xhr-table/app.js
@@ -22,7 +22,7 @@
     Object.keys(options).forEach(key => {
       const value = options[key];
       if (key === 'text') {
-        elem.innerText = value;
+        elem.textContent = value;
       } else {
         elem.setAttribute(key, value);
       }
diff --git a/src/week1/README.md b/src/week1/README.md
@@ -80,13 +80,13 @@ This folder contains the finished version of the Nobel Prize SPA:
 - It adds styling through an external stylesheet (`style.css`), that is loaded via the `index.html` file.
 - It adds a `<select>` element that contains collection of queries that can be made against the Nobel Prize API.
 - It adds an event handler to the `change` event of the `<select>` element, so that a new XMLHttpRequest is made whenever the selection changes.
-- It extends the `createAndAppend` function with an ability to specify the `innerText` and any HTML attributes to the newly created element in a single call to `createAndAppend`. This is done via an optional third parameter, named `options`.
+- It extends the `createAndAppend` function with an ability to specify the `textContent` and any HTML attributes to the newly created element in a single call to `createAndAppend`. This is done via an optional third parameter, named `options`.
 
 #### createAndAppend
 
 The extended version of `createAndAppend` is shown below. The added third parameter `options` is optional. If you supply this parameter when calling `createAndAppend` it must be an object with HTML attribute names and values. If you don't supply it, the value of the `options` parameter is set to an empty object. This is what the (ES6) syntax `options = {}` does. So, what follows the `=` sign is _default_ value for `options`, i.e. assigned to the parameter if it is not provided when `createAnAppend` is called.
 
-As you can see, the `forEach` method iterates through all keys of the `options` object. If the name of a property key is `html` it assigns the property value to the `innerText` of the newly created HTML element. Otherwise the **property key** is assumed to be the name of an HTML attribute and the **property value** the value of that attribute. The `.setAttribute` method is then called using `key` and `value` as its parameters.
+As you can see, the `forEach` method iterates through all keys of the `options` object. If the name of a property key is `html` it assigns the property value to the `textContent` of the newly created HTML element. Otherwise the **property key** is assumed to be the name of an HTML attribute and the **property value** the value of that attribute. The `.setAttribute` method is then called using `key` and `value` as its parameters.
 
 ```js
 function createAndAppend(name, parent, options = {}) {
@@ -95,7 +95,7 @@ function createAndAppend(name, parent, options = {}) {
   Object.keys(options).forEach(key => {
     const value = options[key];
     if (key === 'text') {
-      elem.innerText = value;
+      elem.textContent = value;
     } else {
       elem.setAttribute(key, value);
     }
@@ -114,7 +114,7 @@ This call:
 
 1. creates a `<td>` element,
 2. appends it to its parent `tr` element,
-3. sets its innerText to `'Name:'`,
+3. sets its textContent to `'Name:'`,
 4. and set its `class` attribute to `'label'`.
 
 #### addRow
diff --git a/src/week2/1-base/app.js b/src/week2/1-base/app.js
@@ -13,7 +13,7 @@
     let counter = 0;
     setInterval(() => {
       counter += 1;
-      span.innerText = counter;
+      span.textContent = counter;
     }, 200);
   }
 
diff --git a/src/week2/2-xhr-sync/app.js b/src/week2/2-xhr-sync/app.js
@@ -14,7 +14,7 @@
   function fetchAndRender(url) {
     const pre = document.getElementById('response');
     const prizeData = fetchJSON(url);
-    pre.innerText = JSON.stringify(prizeData, null, 2);
+    pre.textContent = JSON.stringify(prizeData, null, 2);
   }
 
   function main(url) {
@@ -25,7 +25,7 @@
     let counter = 0;
     setInterval(() => {
       counter += 1;
-      span.innerText = counter;
+      span.textContent = counter;
     }, 200);
   }
 
diff --git a/src/week2/3-xhr-callback/app.js b/src/week2/3-xhr-callback/app.js
@@ -19,7 +19,7 @@
   function fetchAndRender(url) {
     const pre = document.getElementById('response');
     fetchJSON(url, (err, data) => {
-      pre.innerText = err ? err.message : JSON.stringify(data, null, 2);
+      pre.textContent = err ? err.message : JSON.stringify(data, null, 2);
     });
   }
 
@@ -31,7 +31,7 @@
     let counter = 0;
     setInterval(() => {
       counter += 1;
-      span.innerText = counter;
+      span.textContent = counter;
     }, 200);
   }
 
diff --git a/src/week2/4-xhr-promise/app.js b/src/week2/4-xhr-promise/app.js
@@ -22,10 +22,10 @@
     const pre = document.getElementById('response');
     fetchJSON(url)
       .then(data => {
-        pre.innerText = JSON.stringify(data, null, 2);
+        pre.textContent = JSON.stringify(data, null, 2);
       })
       .catch(err => {
-        pre.innerText = err.message;
+        pre.textContent = err.message;
       });
   }
 
@@ -37,7 +37,7 @@
     let counter = 0;
     setInterval(() => {
       counter += 1;
-      span.innerText = counter;
+      span.textContent = counter;
     }, 200);
   }
 
diff --git a/src/week2/5-xhr-await/app.js b/src/week2/5-xhr-await/app.js
@@ -22,9 +22,9 @@
     const pre = document.getElementById('response');
     try {
       const data = await fetchJSON(url);
-      pre.innerText = JSON.stringify(data, null, 2);
+      pre.textContent = JSON.stringify(data, null, 2);
     } catch (err) {
-      pre.innerText = err.message;
+      pre.textContent = err.message;
     }
   }
 
@@ -36,7 +36,7 @@
     let counter = 0;
     setInterval(() => {
       counter += 1;
-      span.innerText = counter;
+      span.textContent = counter;
     }, 200);
   }
 
diff --git a/src/week2/6-callbacks-vs-promises/1-from-xhr/app-promise.js b/src/week2/6-callbacks-vs-promises/1-from-xhr/app-promise.js
@@ -14,13 +14,13 @@ const main = url => {
 
   const renderLaureate = (laureate, parent) => {
     var li = document.createElement('li');
-    li.innerText = `${laureate.firstname} ${laureate.surname}`;
+    li.textContent = `${laureate.firstname} ${laureate.surname}`;
     parent.appendChild(li);
   };
 
   const renderLaureates = (laureates, title) => {
     const h2 = document.createElement('h2');
-    h2.innerText = title;
+    h2.textContent = title;
     root.appendChild(h2);
 
     const ul = document.createElement('ul');
diff --git a/src/week2/6-callbacks-vs-promises/1-from-xhr/app.js b/src/week2/6-callbacks-vs-promises/1-from-xhr/app.js
@@ -3,13 +3,13 @@ const main = (url) => {
 
     const renderLaureate = (laureate, parent) => {
         var li = document.createElement('li');
-        li.innerText = `${laureate.firstname} ${laureate.surname}`;
+        li.textContent = `${laureate.firstname} ${laureate.surname}`;
         parent.appendChild(li);
     }
 
     const renderLaureates = (laureates, title) => {
         const h2 = document.createElement('h2');
-        h2.innerText = title;
+        h2.textContent = title;
         root.appendChild(h2);
 
         const ul = document.createElement('ul');
diff --git a/src/week2/6-callbacks-vs-promises/2-chaining/app-promise-all.js b/src/week2/6-callbacks-vs-promises/2-chaining/app-promise-all.js
@@ -3,13 +3,13 @@ const main = ({ countryUrl, cityUrl, genderUrl }) => {
 
     const renderLaureate = (laureate, parent) => {
         var li = document.createElement('li');
-        li.innerText = `${laureate.firstname} ${laureate.surname}`;
+        li.textContent = `${laureate.firstname} ${laureate.surname}`;
         parent.appendChild(li);
     }
 
     const renderLaureates = (laureates, title) => {
         const h2 = document.createElement('h2');
-        h2.innerText = title;
+        h2.textContent = title;
         root.appendChild(h2);
 
         const ul = document.createElement('ul');
diff --git a/src/week2/6-callbacks-vs-promises/2-chaining/app-promise.js b/src/week2/6-callbacks-vs-promises/2-chaining/app-promise.js
@@ -3,13 +3,13 @@ const main = ({ countryUrl, cityUrl, genderUrl }) => {
 
   const renderLaureate = (laureate, parent) => {
     var li = document.createElement('li');
-    li.innerText = `${laureate.firstname} ${laureate.surname}`;
+    li.textContent = `${laureate.firstname} ${laureate.surname}`;
     parent.appendChild(li);
   };
 
   const renderLaureates = (laureates, title) => {
     const h2 = document.createElement('h2');
-    h2.innerText = title;
+    h2.textContent = title;
     root.appendChild(h2);
 
     const ul = document.createElement('ul');
@@ -21,7 +21,7 @@ const main = ({ countryUrl, cityUrl, genderUrl }) => {
 
   const renderError = error => {
     var p = document.createElement('p');
-    p.innerText = `We got an error: ${error}!`;
+    p.textContent = `We got an error: ${error}!`;
     root.appendChild(p);
   };
 
diff --git a/src/week2/6-callbacks-vs-promises/2-chaining/app.js b/src/week2/6-callbacks-vs-promises/2-chaining/app.js
@@ -3,13 +3,13 @@ const main = ({ countryUrl, cityUrl, genderUrl }) => {
 
     const renderLaureate = (laureate, parent) => {
         var li = document.createElement('li');
-        li.innerText = `${laureate.firstname} ${laureate.surname}`;
+        li.textContent = `${laureate.firstname} ${laureate.surname}`;
         parent.appendChild(li);
     }
 
     const renderLaureates = (laureates, title) => {
         const h2 = document.createElement('h2');
-        h2.innerText = title;
+        h2.textContent = title;
         root.appendChild(h2);
 
         const ul = document.createElement('ul');
diff --git a/src/week3/cards-web/CardGame.js b/src/week3/cards-web/CardGame.js
@@ -47,7 +47,7 @@
     }
 
     updateDealLabel() {
-      this.dealButton.innerText = `DEAL ${DEAL_LABELS[this.dealCount]}`;
+      this.dealButton.textContent = `DEAL ${DEAL_LABELS[this.dealCount]}`;
       this.dealCount += 1;
     }
 
diff --git a/src/week3/cards-web/util.js b/src/week3/cards-web/util.js
@@ -6,7 +6,7 @@ function createAndAppend(name, parent, options = {}) {
   parent.appendChild(elem);
   for (const key of Object.keys(options)) {
     if (key === 'text') {
-      elem.innerText = options.text;
+      elem.textContent = options.text;
     } else {
       elem.setAttribute(key, options[key]);
     }
diff --git a/src/week3/nobel-prize/Util.js b/src/week3/nobel-prize/Util.js
@@ -14,7 +14,7 @@ class Util {
     Object.keys(options).forEach(key => {
       const value = options[key];
       if (key === 'text') {
-        elem.innerText = value;
+        elem.textContent = value;
       } else {
         elem.setAttribute(key, value);
       }

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ function createAndAppend(name, parent, options = {}) {`
`24`	`24`	`parent.appendChild(elem);`
`25`	`25`	`for (const key of Object.keys(options)) {`
`26`	`26`	`if (key === 'text') {`
`27`		`- elem.innerText = options.text;`
	`27`	`+ elem.textContent = options.text;`
`28`	`28`	`} else {`
`29`	`29`	`elem.setAttribute(key, options[key]);`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`	`parent.appendChild(elem);`
`23`	`23`	`for (const key of Object.keys(options)) {`
`24`	`24`	`if (key === 'text') {`
`25`		`- elem.innerText = options.text;`
	`25`	`+ elem.textContent = options.text;`
`26`	`26`	`} else {`
`27`	`27`	`elem.setAttribute(key, options[key]);`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@`
`25`	`25`	`const root = document.getElementById('root');`
`26`	`26`	`const pre = document.createElement('pre');`
`27`	`27`	`root.appendChild(pre);`
`28`		`- pre.innerText = JSON.stringify(data, null, 2);`
	`28`	`+ pre.textContent = JSON.stringify(data, null, 2);`
`29`	`29`	`});`
`30`	`30`	`}`
`31`	`31`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`	`const li = document.createElement('li');`
`27`	`27`	`ul.appendChild(li);`
`28`	`28`	`li.className = 'list-item';`
`29`		- li.innerText = `Name: ${laureate.firstname} ${laureate.surname}`;
	`29`	+ li.textContent = `Name: ${laureate.firstname} ${laureate.surname}`;
`30`	`30`	`});`
`31`	`31`	`}`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`laureates.forEach(laureate => {`
`31`	`31`	`const li = createAndAppend('li', ul);`
`32`	`32`	`li.className = 'list-item';`
`33`		- li.innerText = `Name: ${laureate.firstname} ${laureate.surname}`;
	`33`	+ li.textContent = `Name: ${laureate.firstname} ${laureate.surname}`;
`34`	`34`	`});`
`35`	`35`	`}`
`36`	`36`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ In the solution of Jim, I really like the flexibility that you can set any attri`
`10`	`10`	`Object.keys(options).forEach(key => {`
`11`	`11`	`const value = options[key];`
`12`	`12`	`if (key === 'text') {`
`13`		`- elem.innerText = value;`
	`13`	`+ elem.textContent = value;`
`14`	`14`	`} else {`
`15`	`15`	`elem.setAttribute(key, value);`
`16`	`16`	`}`