私の配列内の値はDOM内でレンダリングされません

私はconsole.logで配列が表示されますが、何か他のものを試してみると（配列とキー、またはそれを追加するだけで）未定義のものしか表示されません。この場合、どのような実際に私の画面上に現れることである：チェックボックス未定義ボタン私の配列内の値はDOM内でレンダリングされません

<body> 
<input id="text-field-input" type="text" placeholder="what do you have to do?"/> 
<button id="submit">submit</button> 
<ul id="list-section"> 
</ul>

var toDoList = []; 

function addInputToList(todoinput, checkchecked) { 
    toDoList.push({todo : todoinput, checked : checkchecked}); 
}; 

function renderToDos() { 
    $('#list-section').append('<input type="checkbox">' + toDoList.todo + ' ' + '<button>x</button>'); 
}; 

$('#submit').on('click', function() { 
    var textFieldInput = $('#text-field-input').val().toLowerCase(); 

    addInputToList(textFieldInput, false); 
    renderToDos(); 
});

出典

2016-07-22 kmgiffin

あなたのコードでは、このようなプロパティを持たない配列（to to）のオブジェクトプロパティにアクセスしようとしています。だからあなたは未定義になっている。

var toDoList = []; 
 

 
function addInputToList(todoinput, checkchecked) { 
 
    toDoList.push({todo : todoinput, checked : checkchecked}); 
 
}; 
 

 
function renderToDos() { 
 
    var count = toDoList.length; 
 
    if(count > 0){ 
 
    var addedTodo = toDoList[count-1] 
 
     $('#list-section').append('<input type="checkbox">' + addedTodo.todo + ' ' + '<button>x</button>'); 
 
    } 
 
    
 
}; 
 

 
$('#submit').on('click', function() { 
 
    var textFieldInput = $('#text-field-input').val().toLowerCase(); 
 

 
    addInputToList(textFieldInput, false); 
 
    renderToDos(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<input id="text-field-input" type="text" placeholder="what do you have to do?"/> 
 
<button id="submit">submit</button> 
 
<ul id="list-section"> 
 
</ul>

はおそらく、あなたはこれを達成したいです

出典

2016-07-22 21:06:32 WitVault

あなたtoDoListがArrayで、あなたのへをレンダリングするために、その要素をループする必要がありますリストを作成：

function renderToDos() { 
    for(var i = 0; i < toDoList.length; i++) { 
     $('#list-section').append('<input type="checkbox">' + toDoList[i].todo + ' ' + '<button>x</button>'); 
    } 
};

私はこれがあなたに役立つことを願っています。

出典

2016-07-22 20:59:19

私の配列内の値はDOM内でレンダリングされません

答えて

関連する問題