输入JavaScript对象

我熟悉JavaScript，但不熟悉在DOM中使用它。我试图做一个形式，将接受一个项目名称+性能和存储它就像我写了下面的对象：输入JavaScript对象

var grocery_list = { 
    "Banana": { category: "produce", price: 5.99 }, 
    "Chocolate": { category: "candy", price: 2.75 }, 
    "Wheat Bread": { category: "grains and breads", price: 2.99 } 
}

这里是样本HTML表单，我有：

<form> 
    <input name="item"><br> 
    <input name="category"><br> 
    <input name="price"><br> 
    <input type="submit" value="do stuff"> 
    </form>

如何使用JavaScript将上面的输入推送到一个对象（如上所述）？

来源

2014-12-03 theartofbeing

您应该使用提交侦听器来从输入中获取值，构造所需的对象并将其添加到* grocery_list *中。然后取消提交。您也可以使用普通按钮并将侦听器放在按钮上。 – RobG 2014-12-03 06:50:22

@RobG这是一个JQuery的东西吗？ – theartofbeing 2014-12-03 06:54:12

不可以。您可以*使用jQuery，但它不会在此处添加任何值。 – RobG 2014-12-03 07:00:10

向表单中添加一个侦听器，收集这些值，构建一个对象并将其添加到grocery_list，例如。

<script> var grocery_list = {} function addGroceryItem(form) { grocery_list[form.item.value] = {category: form.category.value, price: form.price.value}; return false; } </script> <form onsubmit="return addGroceryItem(this)"> <input name="item"><br> <input name="category"><br> <input name="price"><br> <input type="submit" value="Add item"> <input type="button" value="Show list" onclick="console.log(grocery_list)"> </form>

虽然我会尝试使用的是普通按钮，而不是一个提交按钮，并把监听器按钮的的onclick处理。

来源

2014-12-03 06:59:14 RobG

我在运行时遇到错误：http://jsfiddle.net/rm7jK/1/ – theartofbeing 2014-12-03 07:07:16

“小提琴”没有使用我的代码。这段代码可以在Safari浏览器中运行，并且每个浏览器都可以运行在IE 6上，可能会更老一些（除了console.log部分）。 – RobG 2014-12-03 07:09:24

我只是弹出它在我的文本编辑器/ HTML文件，并可以看到它打印到console.log ...谢谢！当我将脚本代码从HTML移动到单独链接的JS文件时，我没有定义grocery_list。任何想法为什么？ – theartofbeing 2014-12-03 07:16:33

这可能与jQuery容易地完成：

var objects = []; 
$('form').on('submit', function(e){ 
    var item = $('#item').val(), category = $('#category').val(), price = $('#price').val(); 
    objects.push({item:{'category':category, 'price':parseFloat(price)}}); 
    console.log(JSON.stringify(objects)); 
    e.preventDefault(); 
});

通过listenting到窗体上的一个submit事件，填充对象，并将其推到对象阵列。关于读取DOM中的值，请参阅采用这些值的$('#input_id').val()。

假设你虽然关于纯JS，这也可以这样做：

var objects = []; 
var form = document.getElementById('form'); 
form.onsubmit = function(e){ 
    var item = document.getElementById('item').value, category =document.getElementById('category').value, price = document.getElementById('price').value; 
    objects.push({item:{'category':category, 'price':parseFloat(price)}}); 
    console.log(JSON.stringify(objects)); 
    e.preventDefault(); 
}

http://jsfiddle.net/70fnct9c/

UPDATE 如robg指出的，存储在一个对象，而不是阵列中的对象也可被做容易：

var objects = {} 
................ 
................ 
objects[item] = {'category':category, 'price':parseFloat(price)}

http://jsfiddle.net/70fnct9c/2/

来源

2014-12-03 07:00:52 MorKadosh

谢谢。做这三件事情是什么：parseFloat（price）; - console.log（JSON.stringify（objects））; - e.preventDefault（）; – theartofbeing 2014-12-03 07:02:31

'parseFloat'代表将字符串转换为浮动字符串（我假设你不想将字符串作为价格..）'控制台。log'是一个调试工具，将值输出到控制台工具（在线阅读有关开发人员工具的更多信息），最后，'JSON.stringify'将值转换为JSON（您不必在您的案例中使用它，我按顺序使用它以显示输出） – MorKadosh 2014-12-03 07:08:34

OP将项目存储在对象中，而不是数组。 – RobG 2014-12-03 07:10:47

输入JavaScript对象

回答

相关问题