如何通过onsubmit起作用的函数来显示dom元素？

Question

我正在使用 Javascript 和 CSS 制作带有用户输入的贺卡。我需要能够将用户在表单中提交的信息填充为下面的卡片。我分配了一些 CSS，尽管目前这不是问题。我那里有很多 javascript 的骨头，但我不知道如何在提交后返回这些元素。

  let form = document.createElement('form');
form.setAttribute('id','card-form');



let nameInput = document.createElement('input');
nameInput.setAttribute('type','text');
nameInput.setAttribute('id','name-input');
nameInput.setAttribute('placeholder','Your Name');
nameInput.required = true;
form.appendChild(nameInput);





let messageTextArea = document.createElement('textarea');
messageTextArea.setAttribute('id','message-input');
messageTextArea.setAttribute('placeholder','Your Message');
messageTextArea.required = true;
form.appendChild(messageTextArea);


let imageInput = document.createElement('input');
imageInput.setAttribute('type','url');
imageInput.setAttribute('id','url-input');
imageInput.setAttribute('placeholder','Image or GIF URL');
imageInput.required = true;
form.appendChild(imageInput);



let submitButton = document.createElement('button');
submitButton.setAttribute('type','submit');
submitButton.innerText = 'Finish';
form.appendChild(submitButton);


document.body.appendChild(form);







let cardContainer = document.createElement('div');
cardContainer.setAttribute('id','card-container');
document.body.appendChild('cardContainer');
document.body.appendChild(form);
document.body.appendChild(div);

我尝试简单地在提交时返回该项目，但这并没有返回任何内容

document.getElementById('card-form').addEventListener('submit', function (onSubmit) {
 document.getElementById('card-container');
 return div;
});

Answer 1

我看到了几个问题，

• 您并不是在表单提交后创建卡元素本身并将其附加到cardContainer。

• 停止表单提交的默认行为以防止页面重新加载。

    let form = document.createElement('form');
    form.setAttribute('id', 'card-form');
  
    // input for name
    let nameInput = document.createElement('input');
    nameInput.setAttribute('type', 'text');
    nameInput.setAttribute('id', 'name-input');
    nameInput.setAttribute('placeholder', 'Your Name');
    nameInput.required = true;
    form.appendChild(nameInput);
  
    // textarea for greeting msg
    let messageTextArea = document.createElement('textarea');
    messageTextArea.setAttribute('id', 'message-input');
    messageTextArea.setAttribute('placeholder', 'Your Message');
    messageTextArea.required = true;
    form.appendChild(messageTextArea);
  
    //input for image URL
    let imageInput = document.createElement('input');
    imageInput.setAttribute('type', 'url');
    imageInput.setAttribute('id', 'url-input');
    imageInput.setAttribute('placeholder', 'Image or GIF URL');
    imageInput.required = true;
    form.appendChild(imageInput);
  
    // submit button
    let submitButton = document.createElement('button');
    submitButton.setAttribute('type', 'submit');
    submitButton.innerText = 'Finish';
    form.appendChild(submitButton);
  
    // Append form to the document body
    document.body.appendChild(form);
  
    // Create card container
    let cardContainer = document.createElement('div');
    cardContainer.setAttribute('id', 'card-container');
    document.body.appendChild(cardContainer);
  
    // Event listener for form submission
    document.getElementById('card-form').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default form submission behavior
  
        // Get form values
        let name = document.getElementById('name-input').value;
        let message = document.getElementById('message-input').value;
        let imageUrl = document.getElementById('url-input').value;
  
        // Create card element
        let card = document.createElement('div');
        card.classList.add('card'); // You can add CSS classes or styles here
        card.innerHTML = `
            <h2>${name}</h2>
            <p>${message}</p>
            <img src="${imageUrl}" alt="User Image">
        `;
  
        // Append card to the card container
        cardContainer.appendChild(card);
    });