Как я могу исправить проблему конкатенации строк в JavaScript?

Question

Здесь я объединяю строки в JavaScript

var showList = to_dos =>{
var container = document.querySelector('.work-area .todo-list');
container.innerHTML= "";
for(var i=0; i<to_dos.length; i++){
    container.innerHTML+="<div class='list'>"+
    "<p>"+ to_dos[i].todoContent +"</p>"+
    "<form action='/removeItem' method = 'post' class='icn'> \
        <button type = 'submit' name = "+to_dos[i].todoContent+"><i class='fa fa-check icon check'"+str+"></i></button>\
        <button type = 'submit'><i class='fa fa-close icon close'></i></button>\
    </form>\
</div>"
}

}

Но это происходит, когда я загружаю свой Html страница

<button type="submit" name="Read" the book ><i class="fa fa-check icon check" onclick="checkComplete(this)"></i></button>

Обратите внимание на атрибут имени тега кнопки. Здесь содержание было «Читать книгу», но здесь оно только присваивает атрибуту «Чтение» имя и не присваивает все значения Здесь должно быть значение атрибута имени как name = «Читать книгу». Может кто-нибудь помочь мне это исправить?

Answer 1

Изменить на это:

 <button type = 'submit' name = '"+to_dos[i].todoContent+"'>