gpt4 book ai didi

javascript - 在 Meteor TODO 应用程序中添加另一个字段以形成表单?

转载 作者:行者123 更新时间:2023-11-30 16:22:26 25 4
gpt4 key购买 nike

我是 Meteor 的新手,正在关注官方文档中的 TODO APP。到目前为止一切顺利,但我想在示例中添加一个第二个输入,它只有一个地方用于输入和存储“文本”。我正在尝试添加一个“数量”字段,以便用户可以输入文本和数量。

如果我通过命令行输入:

db.tasks.insert({text: "apples", quantity: 4, createdAt: new Date() });

我可以让数量字段正确填充。但是,在通过 DOM 提交时,我无法将数据输入到数量字段中。这是我的 HTML:

<head>
<title>Todo List</title>
</head>

<body>
<div class="container">
<header>
<h1>Todo List</h1>
<form class="new-task">
<label for="text">TEXT:</label>
<input type="text" name="text" placeholder="Type to add new tasks" />
<label for="text">NUMBER:</label>
<input type="text" name="quantity" placeholder="Quantity" />
<input type="submit" class="submit"/>
</form>

</header>


<ul>
{{#each tasks}}
<!-- this inserts the template called "task" -->
{{> task}}
{{/each}}
</ul>

</div>

</body>

<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{text}}{{quantity}}</span>
<button class="delete">&times;</button>


</li>
</template>

这是我的 JS:

Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient){
//This code only runs on client
Template.body.helpers({
tasks: function () {
// Show newest tasks at the top
return Tasks.find({}, {sort: {createdAt: -1}});
}
});
Template.body.events({
"submit .new-task": function (event) {
// Prevent default browser form submit
event.preventDefault();
console.log(event)

// Get value from form element
var text = event.target.text.value;
var quantity = event.target.text.value;


// Insert a task into the collection
Tasks.insert({
text: text,
quantity: quantity,
createdAt: new Date() // current time
});

// Clear form
event.target.text.value = "";
}
});

Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current value
Tasks.update(this._id, {
$set: {checked: ! this.checked}
});
},
"click .delete": function () {
Tasks.remove(this._id);
}
});

}

您会看到我还没有完成教程并且对 HTML 做了一些修改。

我很确定我搞砸了我的 JS。任何帮助将不胜感激!

最佳答案

只是在玩 JS,当我改变这个时我得到了它:

   // Get value from form element
var text = event.target.text.value;
var quantity = event.target.text.value;

对此:

  // Get value from form element
var text = event.target.text.value;
var quantity = event.target.quantity.value;

关于javascript - 在 Meteor TODO 应用程序中添加另一个字段以形成表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34550914/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com