Added event listener instead of oninput attribute (mdn#35503)

* Added event listener instead of oninput attribute

* Removed DOM listener and added form elements

* Added event listener to form instead of elements

---------

Co-authored-by: daveamit1 <[email protected]>

files/en-us/web/html/element/output/index.md

@@ -35,13 +35,30 @@ Many browsers implement this element as an [`aria-live`](/en-US/docs/Web/Accessi
 In the following example, the form provides a slider whose value can range between `0` and `100`, and an {{HTMLElement("input")}} element into which you can enter a second number. The two numbers are added together, and the result is displayed in the `<output>` element each time the value of any of the controls changes.
 
 ```html
-<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
+<form id="example-form">
   <input type="range" id="b" name="b" value="50" /> +
   <input type="number" id="a" name="a" value="10" /> =
   <output name="result" for="a b">60</output>
 </form>
 ```
 
+```js
+const form = document.getElementById("example-form");
+const a = form.elements["a"];
+const b = form.elements["b"];
+const result = form.elements["result"];
+
+function updateResult() {
+  const aValue = parseInt(a.value);
+  const bValue = parseInt(b.value);
+  result.value = aValue + bValue;
+}
+
+form.addEventListener("input", updateResult);
+
+updateResult();
+```
+
 ### Result
 
 {{ EmbedLiveSample('Examples')}}