I am making a to-do list with JS , React and HTML. The button in the HTML code:
<input type="button" value="Add your new task" id="newTaskBtn">
gets added with an event listener:
document.getElementById( newTaskBtn ).addEventListener("click",addTask);
which calls the function addTask():
function addTask(){
if (document.getElementById( newTask ).value = " ") {
alert( You have to write something. )
} else {
const root = ReactDOM.createRoot(document.getElementById( to-dos container ));
root.render(<newTaskComponent content={document.getElementById( newTask ).value}/>)
{() => setId(c = c + 1);}
}
}
which checks if the input box:
<input type="text" name="addNewTask" id="newTask" value=" " placeholder="Add a new task">
is empty , if not , it calls the newTaskComponent component:
function newTaskComponent(props){
return (
<>
<toDoId />
<p>{props.content}</p>
<Checkbox />
<DeleteBtn />
</>
);
}
which adds a checkbox, a delete button and gives the todo an id(Todo 1,Todo 2 ...) The toDoId() component:
function toDoId(){
const [todos, setTodos] = useState([]);
const addTodo = () => {
setTodos((c) => [...c]);
};
return(
<>
<h1>{addTodo}</h1>
</>
)
}
uses the setId() function declared at the addTask() function to give the todo an Id. Then the checkbox function:
function Checkbox(){
if (document.getElementById( checkbox ).checked) {
alert( Congratulations! )
}
return (
<>
<input type= checkbox name= checkbox id= checkbox ></input>
<label for= checkbox >Completed!</label>
</>
)
}
在任务完成后(检查箱时)向你表示祝贺。 删除纽芬兰语:
function DeleteBtn() {
return(
<>
<button onClick={newTaskComponent = " " && alert(Deleted)}>Delete</button>
</>
)
}
它删除新的TaskComponent(基准部分),并提醒注意删除这项任务。
我认为,在催复国之后,将会发生争do,但似乎并非最糟糕的是,如果对空白投入进行检查的声明也不起作用,那就好像我没有在联合材料档案中写任何法典,所有来源代码都低于标准,我希望一位专家能够提供一些帮助(如果能够详细解释会更好)。
纽约总部
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="纽约总部"></script>
</head>
<body>
<div id="container">
<div id="to do list">
<form>
<h1>To-Do List:</h1>
<input type="text" name="addNewTask" id="newTask" value=" " placeholder="Add a new task">
<div id="to-dos container">
</div>
<input type="button" value="Add your new task" id="newTaskBtn">
</form>
</div>
</div>
</body>
</html>
纽约总部
import React, { useState } from react ;
import ReactDOM from react-dom/client ;
function myFunction(){
document.getElementsByTagName( body ).addEventListener("load",myFunction);
document.getElementById( newTaskBtn ).addEventListener("click",addTask);
function DeleteBtn() {
return(
<>
<button onClick={newTaskComponent = " " && alert(Deleted)}>Delete</button>
</>
)
}
function Checkbox(){
if (document.getElementById( checkbox ).checked) {
alert( Congratulations! )
}
return (
<>
<input type= checkbox name= checkbox id= checkbox ></input>
<label for= checkbox >Completed!</label>
</>
)
}
function toDoId(){
const [todos, setTodos] = useState([]);
const addTodo = () => {
setTodos((c) => [...c]);
};
return(
<>
<h1>{addTodo}</h1>
</>
)
}
function newTaskComponent(props){
return (
<>
<toDoId />
<p>{props.content}</p>
<Checkbox />
<DeleteBtn />
</>
);
}
function addTask(){
if (document.getElementById( newTask ).value = " ") {
alert( You have to write something. )
} else {
const root = ReactDOM.createRoot(document.getElementById( to-dos container ));
root.render(<newTaskComponent content={document.getElementById( newTask ).value}/>)
{() => setId(c = c + 1);}
}
}
}
请帮助,如果问题偏离了排位规则,请不要删除问题,请感谢你。
Edit:我在审查冲积和山角后,改变了源代码,但是,在紧紧靠ton子之后,它仍会装满负荷,但我希望它会有所帮助。
纽约总部
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="纽约总部"></script>
</head>
<body id="body" onload="myFunction()">
<div id="container">
<div id="to do list">
<form>
<label for="addNewTask">To-Do List:</h1><br>
<input type="text" name="addNewTask" id="newTask" value="" placeholder="Add a new task"><br>
<div id="to-dos container"></div><br>
<input type="button" value="Add a new To-Do" id="addNewTask" onclick="addTask()">
</form>
</div>
</div>
</body>
</html>
纽约总部
import React from react ;
import ReactDOM from react-dom/client ;
let input = document.getElementById("newTask").value ;
function myFunction(){
function addTask(){
if(input === ||input === ){
alert( You have to write something )
}else{
const root = ReactDOM.createRoot(document.getElementById( to-dos container ))
root.render(<NewTaskComponent />)
}
}
function NewTaskComponent(){
return(
<div>
<ToDoId />
<p>{`${input}`}</p>
<Checkbox />
<Delete />
</div>
)
}
function ToDoId(){
let c = 1
const add = (function(){
return function () {c += 1; return c}
})();
add();
}
function Checkbox(){
return(
<input type= checkbox id= checkbox onChange= {check()}></input>
)
}
function check(){
if(document.getElementById( checkbox ) === true){
alert( Congrats! )
}else{
alert( Remember to complete your tasks! )
}
}
function Delete(){
return(
<input type= button onClick= {erase()}></input>
)
}
function erase(){
del();
decrement();
}
function del(){
const container = document.getElementById( to-dos container )
const root = ReactDOM.createRoot(container);
root.render(container);
root.unmount();
}
const decrement = (function(){
return function () {c -= 1; return c}
})();
}
专 员 感谢Jacob!