无法通过在JS中通过innerHTML创建的onclick正确调用JS函数

Question

我想使用onclick调用loadInWhat函数并使用LI的值填充我的输入id="what"

 function createDivBox(data){
        document.getElementById("whatContainer").style.display="block";
        document.getElementById("whatContainer").classList.add("ac-container");
        var node = "";
        for (var i=0; i<data.Suggestions[0].Results.length;i++)
        {
            var textnode ='<li value="'+data.Suggestions[0].Results[i].Name+'" onclick="loadInWhat(this.value)">'+data.Suggestions[0].Results[i].Name+'</li>';
            node = node.concat(textnode);
        }
        document.getElementById("whatContainer").innerHTML = '<div class="ac-content"><div class="ac-bd" id="ac-bd"><ul>'+node+'</ul></div></div>';
    }

function loadInWhat(loadStr)
{
  document.getElementById("what").value=loadStr;
}

我的函数在JSON对象数据的基础上动态创建了li元素。我想，如果我点击任何li元素的输入id="什么"字段得到填充的值即data.Suggestion[0].Results[0].Name

每当我传递这个。

Answer 1

li标签的值必须为整数。参考。

我建议使用数据属性。

编辑:数据属性示例

这样创建li(我将整个元素传递给javascript函数);

var textnode ='<li data-val="'+data.Suggestions[0].Results[i].Name+'" onclick="loadInWhat(this)">'+data.Suggestions[0].Results[i].Name+'</li>';

你可以像这样在Javascript中访问这个值;

function loadInWhat(el)
{
  var loadStr = el.dataset.val;
  document.getElementById("what").value=loadStr;
}