Fix typos and pseudo-typos 9

files/en-us/web/api/datatransfer/getdata/index.md

@@ -73,20 +73,20 @@ This example shows the use of the {{domxref("DataTransfer")}} object's
 ### JavaScript
 
 ```js
-function allowDrop(allowdropevent) {
-  allowdropevent.target.style.color = "blue";
-  allowdropevent.preventDefault();
+function allowDrop(allowDropEvent) {
+  allowDropEvent.target.style.color = "blue";
+  allowDropEvent.preventDefault();
 }
 
-function drag(dragevent) {
-  dragevent.dataTransfer.setData("text", dragevent.target.id);
-  dragevent.target.style.color = "green";
+function drag(dragEvent) {
+  dragEvent.dataTransfer.setData("text", dragEvent.target.id);
+  dragEvent.target.style.color = "green";
 }
 
-function drop(dropevent) {
-  dropevent.preventDefault();
-  const data = dropevent.dataTransfer.getData("text");
-  dropevent.target.appendChild(document.getElementById(data));
+function drop(dropEvent) {
+  dropEvent.preventDefault();
+  const data = dropEvent.dataTransfer.getData("text");
+  dropEvent.target.appendChild(document.getElementById(data));
   document.getElementById("drag").style.color = "black";
 }
 ```

files/en-us/web/api/document/cookie/index.md

@@ -93,7 +93,7 @@ In the code above, `newCookie` is a string of form `key=value`, specifying the c
 // needs to work cross-origin.
 // It is more common not to set the `SameSite` attribute, which results in the default,
 // and more secure, value of `SameSite=Lax;`
-document.cookie = "name=oeschger; SameSite=None; Secure";
+document.cookie = "name=Oeschger; SameSite=None; Secure";
 document.cookie = "favorite_food=tripe; SameSite=None; Secure";
 
 function showCookies() {

files/en-us/web/api/document/createcdatasection/index.md

@@ -29,10 +29,10 @@ A [CDATA Section](/en-US/docs/Web/API/CDATASection) node.
 ## Examples
 
 ```js
-const docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
-const cdata = docu.createCDATASection("Some <CDATA> data & then some");
-docu.querySelector("xml").appendChild(cdata);
-console.log(new XMLSerializer().serializeToString(docu));
+const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
+const cdata = doc.createCDATASection("Some <CDATA> data & then some");
+doc.querySelector("xml").appendChild(cdata);
+console.log(new XMLSerializer().serializeToString(doc));
 // Displays: <xml><![CDATA[Some <CDATA> data & then some]]></xml>
 ```
 

files/en-us/web/api/document/createcomment/index.md

@@ -29,14 +29,14 @@ A new {{domxref("Comment")}} object.
 ## Examples
 
 ```js
-const docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
-const comment = docu.createComment(
+const doc = new DOMParser().parseFromString("<xml></xml>", "application/xml");
+const comment = doc.createComment(
   "This is a not-so-secret comment in your document",
 );
 
-docu.querySelector("xml").appendChild(comment);
+doc.querySelector("xml").appendChild(comment);
 
-console.log(new XMLSerializer().serializeToString(docu));
+console.log(new XMLSerializer().serializeToString(doc));
 // Displays: <xml><!--This is a not-so-secret comment in your document--></xml>
 ```
 

files/en-us/web/api/document/createelementns/index.md

@@ -73,15 +73,15 @@ elements from two different namespaces within a single document:
 
 <script type="application/javascript"><![CDATA[
  let container;
- let newdiv;
- let txtnode;
+ let newDiv;
+ let textNode;
 
  function init(){
    container = document.getElementById("ContainerBox");
-   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
-   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
-   newdiv.appendChild(txtnode);
-   container.appendChild(newdiv);
+   newDiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
+   textNode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newDiv.appendChild(textNode);
+   container.appendChild(newDiv);
  }
 
 ]]></script>

files/en-us/web/api/document/createtextnode/index.md

@@ -35,10 +35,10 @@ A {{domxref("Text")}} node.
     <title>createTextNode example</title>
     <script>
       function addTextNode(text) {
-        const newtext = document.createTextNode(text);
+        const newText = document.createTextNode(text);
         const p1 = document.getElementById("p1");
 
-        p1.appendChild(newtext);
+        p1.appendChild(newText);
       }
     </script>
   </head>

files/en-us/web/api/document/evaluate/index.md

@@ -149,10 +149,10 @@ See [Introduction to using XPath in JavaScript](/en-US/docs/Web/XPath/Introducti
 This function is a replacement for {{domxref("Document.getElementById()")}} for when you need to search by `xml:id` instead.
 
 ```js
-function getElementByIdWrapper(xmldoc, id) {
-  return xmldoc.evaluate(
+function getElementByIdWrapper(xmlDoc, id) {
+  return xmlDoc.evaluate(
     `//*[@xml:id="${id}"]`,
-    xmldoc,
+    xmlDoc,
     () => "http://www.w3.org/XML/1998/namespace",
     XPathResult.FIRST_ORDERED_NODE_TYPE,
     null,

files/en-us/web/api/document/execcommand/index.md

@@ -66,7 +66,7 @@ execCommand(aCommandName, aShowDefaultUI, aValueArgument)
       - : Deletes the character ahead of the [cursor](https://en.wikipedia.org/wiki/Cursor_%28computers%29)'s position, identical to hitting the Delete key on a Windows keyboard.
     - `heading`
       - : Adds a heading element around a selection or insertion point line. Requires the tag-name string as a value argument (i.e., `"H1"`, `"H6"`). (Not supported by Safari.)
-    - `hiliteColor`
+    - `highlightColor`
       - : Changes the background color for the selection or at the insertion point. Requires a color value string as a value argument. `useCSS` must be `true` for this to function.
     - `increaseFontSize`
       - : Adds a {{HTMLElement("big")}} tag around the selection or at the insertion point.

files/en-us/web/api/document/fullscreenchange_event/index.md

@@ -83,7 +83,7 @@ function log(message) {
   logger.textContent = `${logger.textContent}\n${message}`;
 }
 
-function fullscreenchanged(event) {
+function fullscreenchangeHandler(event) {
   // document.fullscreenElement will point to the element that
   // is in fullscreen mode if there is one. If there isn't one,
   // the value of the property is null.
@@ -94,7 +94,7 @@ function fullscreenchanged(event) {
   }
 }
 
-document.addEventListener("fullscreenchange", fullscreenchanged);
+document.addEventListener("fullscreenchange", fullscreenchangeHandler);
 
 // When the toggle button is clicked, enter/exit fullscreen
 document.getElementById("toggle-fullscreen").addEventListener("click", () => {

files/en-us/web/api/document/getelementbyid/index.md

@@ -99,8 +99,8 @@ Elements not in the document are not searched by `getElementById()`. When creati
 
 ```js
 const element = document.createElement("div");
-element.id = "testqq";
-const el = document.getElementById("testqq"); // el will be null!
+element.id = "test";
+const el = document.getElementById("test"); // el will be null!
 ```
 
 In non-HTML documents, the DOM implementation must have information on which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The `id` attribute is defined to be of ID type in the common cases of [XHTML](/en-US/docs/Glossary/XHTML), XUL, and others. Implementations that do not know whether attributes are of type ID or not are expected to return `null`.

files/en-us/web/api/document/getelementsbytagnamens/index.md

@@ -35,7 +35,7 @@ A live {{DOMxRef("HTMLCollection")}} of found elements in the order they appear
 ## Examples
 
 In the following example `getElementsByTagNameNS` starts from a particular
-parent element, and searches topdown recursively through the DOM from that parent
+parent element, and searches top-down recursively through the DOM from that parent
 element, looking for child elements matching the tag `name` parameter.
 
 Note that when the node on which `getElementsByTagName` is invoked is not

files/en-us/web/api/document/mozsetimageelement/index.md

@@ -44,8 +44,8 @@ block is clicked by the user.
 
 ```html
 <style>
-  #mybox {
-    background-image: -moz-element(#canvasbg);
+  #my-box {
+    background-image: -moz-element(#canvas-bg);
     text-align: center;
     width: 400px;
     height: 400px;
@@ -54,7 +54,7 @@ block is clicked by the user.
 </style>
 ```
 
-The CSS defined by the {{ HTMLElement("style") }} block above is used by our {{HTMLElement("div")}} to use an element with the id "canvasbg" as its background.
+The CSS defined by the {{ HTMLElement("style") }} block above is used by our {{HTMLElement("div")}} to use an element with the id "canvas-bg" as its background.
 
 ```js
 let c = 0x00;
@@ -72,7 +72,7 @@ function clicked() {
     c = 0x00;
   }
 
-  document.mozSetImageElement("canvasbg", canvas);
+  document.mozSetImageElement("canvas-bg", canvas);
 }
 ```
 
@@ -84,7 +84,7 @@ the user clicks the element, the background is filled with a brighter and bright
 pattern of red tiles.
 
 Once the canvas is drawn, `document.mozSetImageElement()` is called to set
-the background for any CSS using the ID "canvasbg" as its background element ID to be
+the background for any CSS using the ID "canvas-bg" as its background element ID to be
 our new canvas.
 
 ## Specifications

files/en-us/web/api/document/queryselectorall/index.md

@@ -78,11 +78,11 @@ const matches = document.querySelectorAll("iframe[data-src]");
 ```
 
 Here, an attribute selector is used to return a list of the list items contained within
-a list whose ID is `userlist` which have a `data-active` attribute
+a list whose ID is `user-list` which have a `data-active` attribute
 whose value is `1`:
 
 ```js
-const container = document.querySelector("#userlist");
+const container = document.querySelector("#user-list");
 const matches = container.querySelectorAll("li[data-active='1']");
 ```
 

files/en-us/web/api/document_picture-in-picture_api/using/index.md

@@ -36,7 +36,7 @@ The following HTML sets up a basic video player.
       </a>
     </div>
 
-    <div id="controlbar">
+    <div id="control-bar">
       <p class="no-picture-in-picture">
         Document Picture-in-Picture API not available
       </p>
@@ -59,7 +59,7 @@ if ("documentPictureInPicture" in window) {
   togglePipButton.textContent = "Toggle Picture-in-Picture";
   togglePipButton.addEventListener("click", togglePictureInPicture, false);
 
-  document.getElementById("controlbar").appendChild(togglePipButton);
+  document.getElementById("control-bar").appendChild(togglePipButton);
 }
 ```
 

files/en-us/web/api/documentfragment/queryselectorall/index.md

@@ -41,7 +41,7 @@ This example returns a list of all `div` elements within the
 `alert`:
 
 ```js
-const matches = documentfrag.querySelectorAll("div.note, div.alert");
+const matches = documentFrag.querySelectorAll("div.note, div.alert");
 ```
 
 ## Specifications

files/en-us/web/api/editcontext/textformatupdate_event/index.md

@@ -14,9 +14,9 @@ The `textformatupdate` event of the {{domxref("EditContext")}} interface fires w
 
 The event is fired when the IME decides that certain parts of the text being composed should be formatted differently to indicate the composition state.
 
-The following screenshot shows an example of text being written in the Nodepad app on Windows, by using the Japanese IME. The text is formatted with a thick underline to indicate that it's been composed from one of the IME's suggestions.
+The following screenshot shows an example of text being written in the Notepad app on Windows, by using the Japanese IME. The text is formatted with a thick underline to indicate that it's been composed from one of the IME's suggestions.
 
-![Nodepad on Windows with some Japanese text being composed from the IME window](./ime-nodepad.png)
+![Notepad on Windows with some Japanese text being composed from the IME window](./ime-notepad.png)
 
 As a web developer, you should listen for the `textformatupdate` event and update the formatting of the text displayed in your editable region accordingly.
 

files/en-us/web/api/editcontext_api/guide/index.md

@@ -199,7 +199,7 @@ As seen in the previous `render()` function code example, each token is given a
 
 ### Rendering the selection
 
-Even though the demo app uses a `<div>` element for the editor, which already supports displaying a blinking text cursor and highlighting user selections, the EditContext API still requires to render the selection. This is because the EditContext API can be used with other types of elements that don't support these behaviors. Rendering the selection ourselves also gives us more control over how the selection is displayed. Finally, because the `render()` function clears the HTML content of the editor element everytime it runs, any selection that the user might have made is lost the next time the `render()` function runs.
+Even though the demo app uses a `<div>` element for the editor, which already supports displaying a blinking text cursor and highlighting user selections, the EditContext API still requires to render the selection. This is because the EditContext API can be used with other types of elements that don't support these behaviors. Rendering the selection ourselves also gives us more control over how the selection is displayed. Finally, because the `render()` function clears the HTML content of the editor element every time it runs, any selection that the user might have made is lost the next time the `render()` function runs.
 
 To render the selection, the demo app uses the {{domxref("Selection.setBaseAndExtent()")}} method at the end of the `render()` function. To use the `setBaseAndExtent()` method, we need a pair of DOM nodes and character offsets that represent the start and end of the selection. However, the EditContext API maintains the state for the current selection only as a pair of start and end character offsets into the entire edit buffer. The demo app code uses another function, called `fromOffsetsToSelection()` that's used to convert these character offsets into four values:
 

files/en-us/web/api/element/animationcancel_event/index.md

@@ -95,11 +95,11 @@ animated.style.display = "none";
 
 .animation.active {
   animation-duration: 2s;
-  animation-name: slidein;
+  animation-name: slide-in;
   animation-iteration-count: 2;
 }
 
-@keyframes slidein {
+@keyframes slide-in {
   from {
     transform: translateX(100%) scaleX(3);
   }

files/en-us/web/api/element/animationend_event/index.md

@@ -90,11 +90,11 @@ animated.onanimationend = () => {
 
 .animation.active {
   animation-duration: 2s;
-  animation-name: slidein;
+  animation-name: slide-in;
   animation-iteration-count: 2;
 }
 
-@keyframes slidein {
+@keyframes slide-in {
   from {
     transform: translateX(100%) scaleX(3);
   }

files/en-us/web/api/element/animationiteration_event/index.md

@@ -96,11 +96,11 @@ animated.onanimationiteration = () => {
 
 .animation.active {
   animation-duration: 2s;
-  animation-name: slidein;
+  animation-name: slide-in;
   animation-iteration-count: 2;
 }
 
-@keyframes slidein {
+@keyframes slide-in {
   from {
     transform: translateX(100%) scaleX(3);
   }

files/en-us/web/api/element/animationstart_event/index.md

@@ -90,11 +90,11 @@ animated.onanimationstart = () => {
 
 .animation.active {
   animation-duration: 2s;
-  animation-name: slidein;
+  animation-name: slide-in;
   animation-iteration-count: 2;
 }
 
-@keyframes slidein {
+@keyframes slide-in {
   from {
     transform: translateX(100%) scaleX(3);
   }

files/en-us/web/api/element/ariaplaceholder/index.md

@@ -22,18 +22,18 @@ A string.
 In this example the `aria-placeholder` attribute on the element with an ID of `txtBoxInput` has been set to a string. Using `ariaPlaceholder` we update the string to another value.
 
 ```html
-<div id="txtboxLabel">Enter your five-digit zipcode</div>
+<div id="txtboxLabel">Enter your five-digit zip code</div>
 <div
   role="textbox"
   id="txtBoxInput"
   contenteditable="true"
-  aria-placeholder="5-digit zipcode"
+  aria-placeholder="5-digit zip code"
   aria-labelledby="txtboxLabel"></div>
 ```
 
 ```js
 let el = document.getElementById("txtBoxInput");
-console.log(el.ariaPlaceholder); // "5-digit zipcode"
+console.log(el.ariaPlaceholder); // "5-digit zip code"
 el.ariaPlaceholder = "12345";
 console.log(el.ariaPlaceholder); // "12345"
 ```

files/en-us/web/api/element/classlist/index.md

@@ -37,9 +37,9 @@ console.log(div.outerHTML);
 
 // use the classList API to remove and add classes
 div.classList.remove("foo");
-div.classList.add("anotherclass");
+div.classList.add("another-class");
 
-// <div class="anotherclass"></div>
+// <div class="another-class"></div>
 console.log(div.outerHTML);
 
 // if visible is set remove it, otherwise add it

files/en-us/web/api/element/currentcsszoom/index.md

@@ -38,8 +38,8 @@ The "child2" element contains two nested elements, one of which is not rendered,
     <div style="zoom: 3" id="child2">
       child2 (zoom: 3)
       <div id="child3_rendered">child3_rendered</div>
-      <div style="display: none" id="child3_notrendered">
-        child3_notrendered
+      <div style="display: none" id="child3_not-rendered">
+        child3_not-rendered
       </div>
     </div>
   </div>
@@ -81,9 +81,9 @@ if ("currentCSSZoom" in Element.prototype) {
   log(
     `child3_rendered (unzoomed). currentCSSZoom: ${child3_rendered.currentCSSZoom}`,
   );
-  const top_child3_notrendered = document.querySelector("#child3_notrendered");
+  const top_child3_notRendered = document.querySelector("#child3_not-rendered");
   log(
-    `child3_notrendered (not rendered): ${child3_notrendered.currentCSSZoom}`,
+    `child3_notRendered (not rendered): ${child3_notRendered.currentCSSZoom}`,
   );
 } else {
   log("Element.currentCSSZoom not supported in this browser");