未捕获的 ReferenceError：使用字符串时未定义 onclick

Question

I am trying to pass a variable to the onClick function using a previously stored value. I have a database setup that searches for store locations when provided with a ZIP code. For example, the following link is generated using an ajax call after a user searches for a Zip Code. The returned value "WAFHOH3" is the ID that is associated with that particular store:

Generated Link:

<input type="button" onclick="myfunction(WAFHOH1);" value="This Is My Store" data-store-code="WAFHOH3">

Based on this code:

<div class="col-sm-3"><input type="button" onclick="myfunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>

My problem is that if anything other than a number is returned I get a "Uncaught ReferenceError: WAFHOH3 is not defined" console error. When a number is passed like the example below, everything works fine and I get no errors and the application continues to work as expected.

For example (This Works):

Ive tried manually changing the character string to numbers only to isolate any database related issues. My only guess is that there is something in my code that is maybe attempting to verify the input as number.

The full code is below for the ajax call.

Full Code:

function myFunction() {
var searchValue = $('#foobar').val();

if (searchValue.length > 3) {
  var acs_action = 'searchCction';

  $.ajax({
    async: false,
    url: mysearchurl.url+'?action='+acs_action+'&term=' + searchValue,
    type: 'POST',
    data: {
      name: searchValue
    },
    success: function (results) {
      var data = $.parseJSON(results); 

      $('#resContainer').hide();

      var html = '';

      if (data.length > 0) {
        html += '<br/><br/><ul>';
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          html += '<li>';
          html += '<div class="row myclass">';
          html += '<div class="col-sm-9">';
          html += ' <h3>' + item.label + '</h3>' ;
          html += ' <span>' + item.desc + '</span>';
          html += '</div>'
          html += ' <div class="col-sm-3"><input type="button" onclick="dofunction(' + item.store_code + ');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';
          
          html += '</div>';
          html += '</li>';
        }
        html += '</ul><br/><br/><p>This is an example message please email us at <a href="mailto:admin@admin.com">admin@admin.com</a> for assistance.';
      }
      else {
        html += '<br/><br/><p>This is an example message, email us at <a href="mailto:sadmin@admin.com">admin@admin.com</a> for assistance.';
      }

      $('#foo').html(html);
      $('#foo').show();
      $('.foobar').hide();
    }
  });
} else {
  $('#foo').hide();
}
}

Answer 1

You need to wrap the input item.store_code with quotation marks; otherwise, it tries to treat it as a variable, not a string:

html += '<div class="col-sm-3"><input type="button" onclick="noActivationCodeRegistration(\'' + item.store_code + '\');" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';

Ideally, you would attach a click handler after giving the buttons a class (such as register ):

html += '<div class="col-sm-3"><input type="button" class="register" value="This Is My Store" data-store-code="' + item.store_code + '"></div>';

// Later
$('.register').on('click', function() {
    var storeCode = $(this).data('storeCode');
    noActivationCodeRegistration(storeCode);
});

Answer 2

I may be late, and maybe its an absolute mistake of me, but, i have to add my answer here because i just solved exactly the same situation in about three minutes ago .

I just solved this using the most simple sollution, and the error "Uncaught ReferenceError" from the console is solved, also i have my alert(); passing the variable as i needed.

I also need to include that i did not aproove the sollution gave, about "not using" the alert function, once i searched for the sollution, not for another method for that .

So, as i am using php, and the document is html, i thinked about the apostrophe charactere to the variable, after i had been spectating the element using chrome, first moving the function alert to the parent and child elements, that not solved .

After, also in the specting element, inside chrome F12 i tryed changing the function, including '' (that i passed in php code) into variable inside the alert function as: onclick="alert(variable);" to onclick="alert('variable');" and my alert had worked .

Ok. So, i try everything to insert '' 2 single quotes '' to my variable in php, that seems impossible, even if i change all my code to " and use ' or the oposite .

Then, i decided to try the most obvious and old school method, that is about charactere representation, and i cfound that ' (single quote) is represented by ' in php. Everything inside ->> ' <<-

My php code is like this : onclick="alert(&#039'.$variable.'&#039);"

It will work! (with no Vue), ok ? :)