When I input something and press add the result of style display is so bad value and delete button are not in same line, the is a gap between them, I hope Some one can help me out
I think changing the CSS is not best solutions I have tried
function appendInput() {
var input = document.getElementById("input").value.trim();
var div = document.getElementById("div");
if (input !== '') {
var p = document.createElement("div");
p.setAttribute("id", "Wadiw");
var deleteButton = document.createElement("button");
deleteButton.setAttribute("id", "bt");
p.textContent = input;
deleteButton.textContent = "Delete";
deleteButton.addEventListener("click", function() {
div.removeChild(p);
div.removeChild(deleteButton);
});
div.appendChild(p);
div.appendChild(deleteButton);
document.getElementById("input").value = "";
} else {
document.getElementById("input").value = "";
}
}
function Submit() {
var pi = "";
var children = document.getElementById("div").children;
for (var i = 0; i < children.length; i++) {
if (children[i].nodeType === Node.ELEMENT_NODE) {
if (children[i].tagName === "DIV") {
pi += children[i].textContent + "n";
}
}
}
document.getElementById("dew").innerHTML = pi;
}<input id="input" type="text" />
<button onclick="appendInput()">Add</button>
<button onclick="Submit()">Submit</button>
<div id="div"></div>
<div id="dew"></div>0
If you want the elements to be on the same line, don’t use a block-level element, like div to contain the text. Use an inline element like span instead.
That being said, there’s a few things you can do to improve the quality of your code:
- Use
constandletovervar(Why?) - Don’t use
idattributes on dynamically created content which can be repeated multiple times in the DOM – duplicateidare invalid and may cause errors. Use commonclassattributes instead. - Use
addEventListener()to bind event handlers via JS code instead ofonclickattributes in your HTML. - Use delegated event handlers for dynamic content. This means you can use a single event handler for a (theoretically) infinite number of dynamically created elements.
- Select your DOM elements once and store them in variables to save you having to repeatedly query the DOM – which is a relatively slow operation
- Use meaningful variable names and ids, eg.
descriptionnotp, and#containernot#div - The logic under the ‘Submit’ button can be simplified by selecting the elements you create with the given class, creating an array from them and joining that resulting array by
n. - If you convert the ‘Add’ button to a
type="submit"and wrap the form controls inside aformelement, then you can simplify the form so that pressing Return in theinputfield will submit the form and add the new content, without forcing the user to have to click the button.
Here’s a working example of your code with all those changes made:
const input = document.querySelector("#input");
const addForm = document.querySelector('#add-form');
const submitButton = document.querySelector('#submit-button');
const container = document.querySelector('#container');
const output = document.querySelector('#output');
container.addEventListener('click', e => {
if (e.target.classList.contains('delete-button')) {
e.target.closest('div').remove();
}
});
addForm.addEventListener('submit', e => {
e.preventDefault();
const inputValue = input.value.trim();
if (!inputValue)
return;
const itemContainer = document.createElement('div');
const description = document.createElement("span");
description.className = "Wadiw";
description.textContent = input.value.trim();
itemContainer.append(description);
const deleteButton = document.createElement("button");
deleteButton.className = "delete-button";
deleteButton.textContent = "Delete";
itemContainer.append(deleteButton);
container.appendChild(itemContainer);
input.value = "";
});
submitButton.addEventListener('click', e => {
const content = [...document.querySelectorAll('.Wadiw')].map(el => el.textContent.trim());
output.textContent = content.join('n');
}).item-container {
margin-bottom: 5px;
}
.delete-button {
margin-left: 10px;
}<form id="add-form">
<input id="input" type="text" />
<button type="submit" id="add-button">Add</button>
<button type="button" id="submit-button">Submit</button>
</form>
<div id="container"></div>
<div id="output"></div>