Change my text
Nothing
Something
Helllllllllloooooooooooooo
CLick me
You can't change my text
Nothing
Something
CLick me
Change my text
Nothing
Something
CLick me
{"ScriptPreparationCode":null,"TestCases":[{"Name":"forEach","Code":"const inputBlocks = document.querySelectorAll(\u0022.input-block\u0022);\r\nif (inputBlocks)\r\n inputBlocks.forEach((block, index) =\u003E {\r\n \r\n const select = block.querySelector(\u0022.selector\u0022);\r\n const trigger = block.querySelector(\u0022.trigger\u0022);\r\n const text = block.querySelector(\u0022.change-text\u0022);\r\n\r\n \r\n const defaultText = text.textContent;\r\n\r\n if (!select || !trigger || !text) {\r\n return;\r\n }\r\n\r\n trigger.addEventListener(\u0022click\u0022, (e) =\u003E {\r\n text.textContent = select.value ? \u0060Block ${index} says: ${select.value}\u0060 : defaultText;\r\n console.log(\r\n \u0060Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}\u0060\r\n );\r\n });\r\n });\r\n","IsDeferred":false},{"Name":"for of","Code":"const inputBlocks = document.querySelectorAll(\u0022.input-block\u0022);\r\nif (inputBlocks)\r\n // for of doesn\u0027t offer a builtin way of accessing index, so either do a counter or entries().\r\n for(const [index, block] of inputBlocks.entries()) {\r\n \r\n const select = block.querySelector(\u0022.selector\u0022);\r\n const trigger = block.querySelector(\u0022.trigger\u0022);\r\n const text = block.querySelector(\u0022.change-text\u0022);\r\n\r\n \r\n const defaultText = text.textContent;\r\n\r\n if (!select || !trigger || !text) {\r\n // we can\u0027t return because this is no longer a function. https://www.w3schools.com/js/js_break.asp\r\n continue;\r\n }\r\n\r\n trigger.addEventListener(\u0022click\u0022, (e) =\u003E {\r\n text.textContent = select.value ? \u0060Block ${index} says: ${select.value}\u0060 : defaultText;\r\n console.log(\r\n \u0060Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}\u0060\r\n );\r\n });\r\n };","IsDeferred":false},{"Name":"for","Code":"const inputBlocks = document.querySelectorAll(\u0022.input-block\u0022);\r\nif (inputBlocks)\r\n for(let i = 0; i \u003C inputBlocks.length; i\u002B\u002B) {\r\n const block = inputBlocks[i];\r\n const select = block.querySelector(\u0022.selector\u0022);\r\n const trigger = block.querySelector(\u0022.trigger\u0022);\r\n const text = block.querySelector(\u0022.change-text\u0022);\r\n\r\n \r\n const defaultText = text.textContent;\r\n\r\n if (!select || !trigger || !text) {\r\n // we can\u0027t return because this is no longer a function. https://www.w3schools.com/js/js_break.asp\r\n continue;\r\n }\r\n\r\n trigger.addEventListener(\u0022click\u0022, (e) =\u003E {\r\n text.textContent = select.value ? \u0060Block ${index} says: ${select.value}\u0060 : defaultText;\r\n console.log(\r\n \u0060Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}\u0060\r\n );\r\n });\r\n };","IsDeferred":false}]}