| 44 | * Strap length functionality |
| 45 | */ |
| 46 | const newStrapLength = (strapArray) => { |
| 47 | // Loop through each element on the list |
| 48 | strapArray.forEach((listElement) => { |
| 49 | // Get what side we are working with |
| 50 | let side = listElement.getAttribute("data-side"); |
| 51 | |
| 52 | // Create a new form element |
| 53 | const lengthForm = document.createElement("form"); |
| 54 | lengthForm.classList.add(`${side}length`); |
| 55 | |
| 56 | // Populate form with an input and a button |
| 57 | lengthForm.innerHTML = ` |
| 58 | <input type="number" name="${side}Length" placeholder="New ${side} length"> |
| 59 | <button>Update</button> |
| 60 | `; |
| 61 | |
| 62 | // Add event listener to the form submit action |
| 63 | lengthForm.addEventListener("submit", (e) => { |
| 64 | // Stop form from reloading the page |
| 65 | e.preventDefault(); |
| 66 | |
| 67 | // Get the value from the form input |
| 68 | let newValue = lengthForm.querySelector("input").value; |
| 69 | |
| 70 | // Set the value of the field |
| 71 | listElement.querySelector("span").innerHTML = `${newValue} inches`; |
| 72 | |
| 73 | // Clear the form input |
| 74 | lengthForm.querySelector("input").value = ""; |
| 75 | }); |
| 76 | |
| 77 | // Add form to the end of the list element |
| 78 | listElement.append(lengthForm); |
| 79 | }); |
| 80 | }; |
| 81 | |
| 82 | const backpackList = backpackObjectArray.map((backpack) => { |
| 83 | let backpackArticle = document.createElement("article"); |