javascript - 使用 javascript 调用内联函数时出错

Question

我有一个功能:

function controls() {
      var block = $('#controls');
      block.html('');
      block.append('<button type="button" onClick="focus(this.value);" id="viewAll" value="all">View All</button> <br><br>');
      for (var i = 0; i < markers.length; i++) {
        block.append(
          '<label><input id="drones" type="radio" onClick="focus(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
        );
      }
    }

它动态地将 html 元素添加到 div 中。

我想获取我单击的项目的值。

但我收到此错误:

Uncaught TypeError: Failed to execute 'focus' on 'HTMLElement': parameter 1 ('options') is not an object. at HTMLButtonElement.onclick (map 2.html:1) onclick @ map 2.html:1

chrome 中的源窗口正在报告:focus(this.value);

我的焦点功能:

function focus(drone) {
console.log(drone);
}

请帮忙。

Answer 1

错误背后的主要原因是函数focus是HTMLElement的库函数。您需要更改函数名称而不是 focus

请尝试使用 fnFocus 而不是 focus。

function controls() {
  var block = $('#controls');
  block.html('');
  block.append('<button type="button" onClick="fnFocus(this.value);" id="viewAll" value="all">View All</button> <br><br>');
  for (var i = 0; i < markers.length; i++) {
    block.append(
      '<label><input id="drones" type="radio" onClick="fnFocus(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
    );
  }
}
    
function fnFocus(drone) {
  console.log(drone);
}
    
var markers = [
  {title: '1'},
  {title: '2'}
];

controls();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="controls"></div>