尝试通过onClick（）传递时未定义变量

Question

我是Js的新手，所以不知道如何解决这个问题。在显示我的宏$.each之后，如代码示例1 ，我想借助onClick()插入宏体，使用代码示例2 输入文本框但是它抛出：
Uncaught ReferenceError: body is not definedat HTMLDivElement.onclick
奇怪的是，当我将macroId作为值传递时，它会很好地传递并将其插入到输入文本框中。

代码示例1

function loadMacros() {
$.getJSON("api/Macros/",
    (data) => {
        $.each(data, (key, val) => {
            var macroid = val.macroId;
            var name = val.name;
            var body = val.macroBody;
            var userid = val.userId;
            $(`
                <div class="macrobox" onClick="insertMacroToText(${body})">
                <div id="" style="text-align : left">
                <div>
                <p><b>${name}</b>
                <a class=" glyphicon glyphicon-info-sign" href="Messenger/MacroDetails/${macroid}" ></a>
                <a class=" glyphicon glyphicon-pencil" href="Messenger/EditMacro/${macroid}"></a>
                <a class=" glyphicon glyphicon-minus" onClick="deleteMacro(${macroid})" ></a>      
                </p>
                </div>
                <p style="text-align:left">${body}</p> 
                </div>
                </div>
            `)
            .appendTo($('#macros'));
        });
    });
}

代码示例2

function insertMacroToText(body) {
    var input = document.getElementById("textInput");
    input.value = body;
}