如何解決 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>

注意按鈕標簽的名稱屬性。 這里的內容是 'Read the book' 但這里它只將 Read 分配給 name 屬性，並沒有分配所有值這里它應該是 name 屬性的值，如 name = "Read the book"。 有人可以幫我解決嗎？

Answer 1

改成這樣：

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