Question

当尝试编写简单的按钮控制功能时（我正在检查文本区域值，并根据其是否存在，我想设置按钮属性）。两个DOM元素都是通过相同的功能添加的。要访问textarea，我正在使用事件委托。

仍然无法访问提交按钮元素。

index.html

<button id="clicker">Click me</button>
    <div class="container"></div>

main.js

var popUpDiv = null;

var containerDiv = document.querySelector('.container');
var initiateButton = document.getElementById('clicker');

initiateButton.addEventListener('click', function() {
  popUpDiv = document.createElement('div');
  popUpDiv.id = 'test';
  popUpDiv.classList.add('form-wrapper');
  if(containerDiv.innerHTML === '') {
    popUpDiv.innerHTML = `
        <p>
            Lorem ipsum dolor 
        </p>
        <button id="dalej" onClick="test()">Dalej</button>
    `;
    containerDiv.appendChild(popUpDiv);
 } return ;
});

function test() {
var afterVerificationDiv = document.getElementById('test');
afterVerificationDiv.innerHTML = `
    <form action="mailto:test@test.com" method="post">
        <div class="input-wrapper">
            <label for="name">Imię:</label>
            <input type="text" name="user_name" id="#firstName">
        </div>
        <div class="input-wrapper">
            <label for="phone">Numer kontaktowy:</label>
            <input type="text" name="phone" id="#phone">
        </div>
        <div class="textarea-wrapper">
            <label for="message">Wiadomość:</label>
            <textarea name="message" id="msg" cols="30" rows="10"></textarea>
        </div>
        <button id="#submit" disabled>Wyślij</button>
    </form>
`;
 }

document.addEventListener('keyup', function(e) {
if(e.target && e.target.id === 'msg') {
    if(e.target.value) {
        document.getElementById('submit').disabled = false;
    } else {
        document.getElementById('submit').disabled = true;
    }
}
})

如何访问DOM中动态添加的按钮？

0 个答案: