[Beta] Use defined variables to access elements (#4996)

Remove unused variables

beta/src/content/learn/reacting-to-input-with-state.md

@@ -702,14 +702,14 @@ Here is a small form implemented with plain JavaScript and DOM. Play with it to
 ```js index.js active
 function handleFormSubmit(e) {
   e.preventDefault();
-  if (button.textContent === 'Edit Profile') {
+  if (editButton.textContent === 'Edit Profile') {
-    button.textContent = 'Save Profile';
+    editButton.textContent = 'Save Profile';
     hide(firstNameText);
     hide(lastNameText);
     show(firstNameInput);
     show(lastNameInput);
   } else {
-    button.textContent = 'Edit Profile';
+    editButton.textContent = 'Edit Profile';
     hide(firstNameInput);
     hide(lastNameInput);
     show(firstNameText);
@@ -744,11 +744,11 @@ function show(el) {
 }
 
 let form = document.getElementById('form');
-let profile = document.getElementById('profile');
 let editButton = document.getElementById('editButton');
 let firstNameInput = document.getElementById('firstNameInput');
 let firstNameText = document.getElementById('firstNameText');
 let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
 let helloText = document.getElementById('helloText');
 form.onsubmit = handleFormSubmit;
 firstNameInput.oninput = handleFirstNameChange;
@@ -779,7 +779,7 @@ lastNameInput.oninput = handleLastNameChange;
       value="Jacobs"
       style="display: none">
   </label>
-  <button type="submit" id="button">Edit Profile</button>
+  <button type="submit" id="editButton">Edit Profile</button>
   <p><i id="helloText">Hello, Jane Jacobs!</i></p>
 </form>
 
@@ -904,14 +904,14 @@ Here is the original sandbox from the previous challenge, written imperatively w
 ```js index.js active
 function handleFormSubmit(e) {
   e.preventDefault();
-  if (button.textContent === 'Edit Profile') {
+  if (editButton.textContent === 'Edit Profile') {
-    button.textContent = 'Save Profile';
+    editButton.textContent = 'Save Profile';
     hide(firstNameText);
     hide(lastNameText);
     show(firstNameInput);
     show(lastNameInput);
   } else {
-    button.textContent = 'Edit Profile';
+    editButton.textContent = 'Edit Profile';
     hide(firstNameInput);
     hide(lastNameInput);
     show(firstNameText);
@@ -946,11 +946,11 @@ function show(el) {
 }
 
 let form = document.getElementById('form');
-let profile = document.getElementById('profile');
 let editButton = document.getElementById('editButton');
 let firstNameInput = document.getElementById('firstNameInput');
 let firstNameText = document.getElementById('firstNameText');
 let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
 let helloText = document.getElementById('helloText');
 form.onsubmit = handleFormSubmit;
 firstNameInput.oninput = handleFirstNameChange;
@@ -981,7 +981,7 @@ lastNameInput.oninput = handleLastNameChange;
       value="Jacobs"
       style="display: none">
   </label>
-  <button type="submit" id="button">Edit Profile</button>
+  <button type="submit" id="editButton">Edit Profile</button>
   <p><i id="helloText">Hello, Jane Jacobs!</i></p>
 </form>
 
@@ -1035,10 +1035,10 @@ function setIsEditing(value) {
 
 function updateDOM() {
   if (isEditing) {
-    button.textContent = 'Save Profile';
+    editButton.textContent = 'Save Profile';
     // TODO: show inputs, hide content
   } else {
-    button.textContent = 'Edit Profile';
+    editButton.textContent = 'Edit Profile';
     // TODO: hide inputs, show content
   }
   // TODO: update text labels
@@ -1053,11 +1053,11 @@ function show(el) {
 }
 
 let form = document.getElementById('form');
-let profile = document.getElementById('profile');
 let editButton = document.getElementById('editButton');
 let firstNameInput = document.getElementById('firstNameInput');
 let firstNameText = document.getElementById('firstNameText');
 let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
 let helloText = document.getElementById('helloText');
 form.onsubmit = handleFormSubmit;
 firstNameInput.oninput = handleFirstNameChange;
@@ -1088,7 +1088,7 @@ lastNameInput.oninput = handleLastNameChange;
       value="Jacobs"
       style="display: none">
   </label>
-  <button type="submit" id="button">Edit Profile</button>
+  <button type="submit" id="editButton">Edit Profile</button>
   <p><i id="helloText">Hello, Jane Jacobs!</i></p>
 </form>
 
@@ -1142,13 +1142,13 @@ function setIsEditing(value) {
 
 function updateDOM() {
   if (isEditing) {
-    button.textContent = 'Save Profile';
+    editButton.textContent = 'Save Profile';
     hide(firstNameText);
     hide(lastNameText);
     show(firstNameInput);
     show(lastNameInput);
   } else {
-    button.textContent = 'Edit Profile';
+    editButton.textContent = 'Edit Profile';
     hide(firstNameInput);
     hide(lastNameInput);
     show(firstNameText);
@@ -1172,11 +1172,11 @@ function show(el) {
 }
 
 let form = document.getElementById('form');
-let profile = document.getElementById('profile');
 let editButton = document.getElementById('editButton');
 let firstNameInput = document.getElementById('firstNameInput');
 let firstNameText = document.getElementById('firstNameText');
 let lastNameInput = document.getElementById('lastNameInput');
+let lastNameText = document.getElementById('lastNameText');
 let helloText = document.getElementById('helloText');
 form.onsubmit = handleFormSubmit;
 firstNameInput.oninput = handleFirstNameChange;
@@ -1207,7 +1207,7 @@ lastNameInput.oninput = handleLastNameChange;
       value="Jacobs"
       style="display: none">
   </label>
-  <button type="submit" id="button">Edit Profile</button>
+  <button type="submit" id="editButton">Edit Profile</button>
   <p><i id="helloText">Hello, Jane Jacobs!</i></p>
 </form>