Javascript:如何获取用户输入数据并将其转换为对象

Javascript: how do I take my users input data and turn it into an object?

本文关键字:数据 转换 对象 输入 用户 何获取 获取 Javascript      更新时间:2023-09-26

我有一个待办事项列表,我想我可以通过html文本框接收用户输入。在单击按钮后,信息当前以无序列表形式打印在这些文本框下。

它不完美,也就是说我跳过了一个步骤,我想先把用户输入的字符串添加到这个函数中。

function task(task_text, date, time) 
这样做的目的当然是为了稍后在整个代码中交换对象属性。

那么,我该如何获取文本框中的信息,并在点击按钮时将其提交给上述函数呢?

小提琴http://jsfiddle.net/brendanjackson/j501hc1k/1/

小提琴:http://jsfiddle.net/KyleMuir/3rh4u7qu/1/

我想这就是你想要的:

function task(text, date, time) {
    this.text = text;
    this.date = date;
    this.time = time;
}
function buttonClicked() {
    var myText = document.getElementById('myText');
    var input_text = document.getElementById('input_text').value  ;
    var input_date = document.getElementById('input_date').value  ;
    var input_time = document.getElementById('input_time').value  ;
    var item = new task(input_text, input_date, input_time);
        myText.innerHTML += "<li>"+item.text+" "+item.date+" "+item.time+"</li>";
}

此外,在这里添加了一个稍微有趣的任务对象用法,从学习的角度来看可能很有用:http://jsfiddle.net/KyleMuir/3rh4u7qu/2/

获取onclick输入

要将此输入输入到函数中,必须侦听onclick事件。

var input_text = document.getElementById('input_text').value;
var input_date = document.getElementById('input_date').value;
var input_time = document.getElementById('input_time').value;

onclick="task(input_text, input_date, input_time);"


如何获取用户输入数据并将其转换为对象?


当函数被调用时,可以根据传入的数据创建一个对象,如下所示:

var inputs = [];
function task(task_text, date, time) {
    input.push({
        task_text: task_text,
        date: date,
        time: time
    });
}

或者如果你只打算接受一个输入,你可以这样做:

var obj = {};
function task(task_text, date, time) {
    obj.task_text: task_text,
    obj.date: date,
    obj.time: time
}