如何在更改事件上设置切换输入字段的名称属性

Question

I am trying to change the attribute name="" value of an input field that is toggled once a check box is set and a toggled input is shown and filled out.

User checks a check box, once the check box is checked an input field shows where the title once was. I got this part covered.

Once the input field shows, I want to change the name attribute in that input field with the value the user inputs all before submission of form.

Here is the code I have tried...

 document.getElementById('custom-check-box').addEventListener('click', function() { if (this.checked) { document.getElementById('custom-span').innerHTML = '<input type="text" id="customInputName" name="customInputName" placeholder="Name the custom attribute">'; } else { document.getElementById('custom-span').innerHTML = 'Custom: '; } }); // this bit of code is not working as intended. I want to get the input // value after the user changes or focus out of the input and then have that // value input into the name attribute for the same input. document.getElementById('customInputName').addEventListener('change', function() { if (this.onChange) { let value = document.getElementById('customInputName').value; this.setAttribute("name", value); } });

 <div title="'.$title.'" class="input-info"> <span id="custom-span">Custom:</span> Yes: <input id="custom-check-box" type="checkbox" class="input-check" name="custom" value="yes"> </div>

Error: Cannot read property 'addEventListener' of null

I think it is because the input is not set yet in the DOM. Should I set the input in HTML, hide it and then change the name attribute and then show it?

Any help would be greatly appreciated as I am a bit of a beginner with JavaScript.

Thank you in advance!

SEE ACCEPTED ANSWER FOR UPDATE ON WORKING CODE. -> Second snippit was added an edit to @CertainPerformance code that works better for my use.

Answer 1

I'd create the <input> outside of any of the handlers, and give it the listener which assigns its value to its name. When the checkbox is checked, append the input to the container, otherwise clear the container:

 const input = document.createElement('input'); input.name = 'customInputName'; input.placeholder = 'Name the custom attribute'; const customSpan = document.getElementById('custom-span'); document.getElementById('custom-check-box').addEventListener('click', function() { if (this.checked) { customSpan.textContent = ''; customSpan.appendChild(input); } else { customSpan.textContent = 'Custom: '; } }); input.addEventListener('change', function() { input.name = input.value; });

 <div title="'.$title.'" class="input-info"> <span id="custom-span">Custom:</span> Yes: <input id="custom-check-box" type="checkbox" class="input-check" name="custom" value="yes"> </div>