如何解决将提交的表单和图像存储在底部并将输入区域清除为默认值
嗨，我这周开始写代码，我的任务很简单
到目前为止我设法到了这里并卡住了
我的问题： 1-当点击标题时，它应该在更改为新标题之前选择所有句子。
2- 提交表单后，我想以与输入表单相同的样式存储它，而不是列表。
3- 我无法管理商店图片。它说未定义。
如果有人帮忙，非常感谢。
ps：我很新，如果你解释得这么简单，我会很感激
// title and description forms
let userFormDOM = document.querySelector("#userForm");
userFormDOM.addEventListener("submit",formHandler);
function formHandler(event) {
event.preventDefault();
const TITLE = document.querySelector("#title");
const TEXT_AREA = document.querySelector("#textArea");
// clearing forms to default after submit
if (TITLE.value && TEXT_AREA.value) {
addItem(TITLE.value,TEXT_AREA.value);
TITLE.value = "New Title";
TEXT_AREA.value = "New Description";
}
}
// Grabbing Elements and Storing in Variables
const defaultFile = document.getElementById("default-file");
const preview = document.getElementById("preview");
preview.addEventListener("click",function () {
defaultFile.click();
});
// File Upload
defaultFile.addEventListener("change",function () {
// Image Preview,files[0] - For getting first file
const files = defaultFile.files[0];
if (files) {
// Showing Image and Hiding "Click to add image" Text
preview_img.style.display = "block";
preview_text.style.display = "none";
//Read File
const fileReader = new FileReader();
fileReader.addEventListener("load",function () {
// convert image to base64 encoded string
preview_img.setAttribute("src",this.result);
console.log(this.result);
});
fileReader.readAsDataURL(files);
}
});
// listing items after submit
let userListDOM = document.querySelector("#userList");
const addItem = (title,textArea,defaultFile) => {
let liDOM = document.createElement("li");
liDOM.innerHTML = `${title} ${textArea} ${defaultFile}`;
liDOM.classList.add();
userListDOM.append(liDOM);
};/* General Styling */
body {
Box-sizing: border-Box;
margin: 0;
padding: 0;
background-color: whitesmoke;
color: black;
font-family: "Montserrat",sans-serif;
}
/* Form Styling */
input {
resize: none;
width: 400px;
min-height: 30px;
border: none;
background-color: lightgray;
}
textarea {
resize: none;
width: 400px;
min-height: 100px;
border: none;
background-color: lightgray;
font-family: "Montserrat",sans-serif;
}
/* Button Styling */
.btn {
border: none;
background-color: lightgray;
padding: 10px;
cursor: pointer;
align-items: center;
justify-content: center;
}
/* Container Styling */
.container {
display: flex;
justify-content: center;
margin-top: 10px;
}
/* Image Preview Styling */
.preview_holder {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#preview {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
min-height: 400px;
border: none;
background-color: lightgray;
}
.preview_img {
display: none;
width: 100%;
object-fit: cover;
}<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width" />
<title>New Title</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="userInput">
<form id="userForm">
<!-- Form Markup-->
<div class="container">
<label class="form-label" for="title"></label>
<input class="form-control" type="text" name="title" id="title" value="New Title" />
</div>
<div class="container">
<label class="form-label" for="textArea"></label>
<textarea class="form-control" type="textArea" name="textArea" id="textArea" rows="10"
cols="55">New Description </textarea>
</div>
<!-- Input Markup -->
<div class="container">
<input type="file" id="default-file" hidden="hidden" />
</div>
<!-- Image Preview Markup -->
<div class="preview_holder">
<div id="preview">
<img src="" id="preview_img" class="preview_img" width="400" height="400" />
<span id="preview_text" class="preview_text">Click to add image</span>
</div>
</div>
<!-- Button Markup -->
<div class="container">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</div>
<!-- Listing Markup -->
<div class="container">
<ul class="list-group" id="userList"></ul>
</div>
<script src="./js/index.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
