error calling inline function with javascript

Question

I have a function:

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>'
        );
      }
    }

It dynamically adds html elements into the div.

I want to get the value for the item that i clicked on.

But im getting this error:

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

The source window in chrome is reporting: focus(this.value);

my focus function:

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

Please help.

csharpbd · Accepted Answer · 2019-01-22 06:22:56Z

2

The main reason behind the error is that the function focus is a library function for HTMLElement. You need to change the name of the function instead of focus

Please try using fnFocus instead of 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>

answered Jan 22, 2019 at 6:22

csharpbd

4,1164 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

g.g Over a year ago

This solved my problem! thank you! Got to be wise in naming functions..oh well..

Bitwise Creative Over a year ago

Or you can use delegated event handlers and never worry about it.

Bitwise Creative · Accepted Answer · 2019-01-22 06:15:48Z

1

I'd recommend using a delegated jQuery event handler. Like this:

var markers = [
  {title: '1'},
  {title: '2'},
  {title: '3'},
];

function controls() {
  var block = $('#controls');
  block.html('');
  block.append('<button type="button" class="get-val" 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" class="get-val"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
    );
  }
}

$('#controls').on('click', '.get-val', function() {
  console.log($(this).val());
});

controls();

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

answered Jan 22, 2019 at 6:15

Bitwise Creative

4,0805 gold badges31 silver badges35 bronze badges

3 Comments

g.g Over a year ago

Hi, thanks for your reply. I have tried your method, but the click event is not happening, when i clicked on the button, nothing happened.

Bitwise Creative Over a year ago

Did you see I added the get-val class to the button and radios? (and removed the onClicks)

g.g Over a year ago

yes i did but not working in my local, no idea why.. the error is solved. thank you for your input!

Kalaiselvan · Accepted Answer · 2019-01-22 06:23:20Z

hope it will be helpful to you

var markers=[];
function controls() {
      var block = $('#controls');
      block.html('');
      block.append('<button type="button" onclick="focus_ele(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_ele(this.value);"  name="drones" value="' + markers[i].title + '" /> Focus on: ' + markers[i].title + ' </label><br>'
        );
      }
    }

function focus_ele(els) {
console.log(els);
}
$("document").ready(function(){
    controls();
})

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

Collectives™ on Stack Overflow

error calling inline function with javascript

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related