如何在 JavaScript 中放置在事件处理程序中的函数中获取 this.value 作为参数？

Question

 function change_myselect(sel) { return new sel; } function customers () { var xmlhttp, myObj, i, tbl = ''; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); tbl += '<table border="1">'; for (i in myObj) { tbl += '<tr><td>' + myObj[i] + '</td></tr>' ; } tbl += '</table>'; document.getElementById('showSelection').innerHTML = tbl; } }; xmlhttp.open('GET', 'suppliers.txt', true); xmlhttp.send(); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>Make a table based on the value of a drop down menu.</h2> <select onchange="change_myselect(customers)"> <option value="">Choose an option</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option> </select> <p id="showSelection"></p>

在上面的代码中，它起作用是因为我在 change_myselect 函数中手动编写了 CUSTOMERS 作为参数。

 function change_myselect(sel) { return new sel; } function customers () { var xmlhttp, myObj, i, tbl = ''; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); tbl += '<table border="1">'; for (i in myObj) { tbl += '<tr><td>' + myObj[i] + '</td></tr>' ; } tbl += '</table>'; document.getElementById('showSelection').innerHTML = tbl; } }; xmlhttp.open('GET', 'customers.txt', true); xmlhttp.send(); }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>Make a table based on the value of a drop down menu.</h2> <select onchange="change_myselect(this.value)"> <option value="">Choose an option</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option> </select> <p id="showSelection"></p>

我想根据下拉菜单的值制作一个表格。 我使用 ONCHANGE 事件处理程序来获取选项的值并将其传递给 change_myselect 函数，以使用 JSON 从服务器检索相应的信息。 当我写 CUSTOMERS 函数的名称时，在 change_myselect 函数中它工作正常。 但是当我使用 THIS.VALUE 时，它不起作用。 我已经使用 NEW 关键字返回并调用 CUSTOMERS 函数而不使用括号。

Answer 1

你从 HTML 中得到的一切都是字符串。 当您将字面书写的customers传递给change_myselect函数时，它是对customers函数的引用。 当您传递this.value ，它只是一个字符串。 这就是为什么您会收到错误而不是函数调用的原因。

根据您的代码，您似乎想要调用一个与所选选项的值同名的函数。 在 JavaScript 中，字符串不能直接转换为引用（以合理的方式），这正是您在引用函数时所需要的。 您需要一个辅助对象来获取引用。

 // Helper object contains methods calling the functions const handlers = { customers () {customers();}, products () {products();}, suppliers () {suppliers();} } function change_myselect(sel) { // Check, if the passed property name is a function in handlers object if (typeof handlers[sel] === 'function') { // A method named as the passed string was found // Call the found method handlers[sel](); } } function customers () { console.log('customers called'); } function products () { console.log('products called'); } function suppliers () { console.log('suppliers called'); }

 <h2>Make a table based on the value of a drop down menu.</h2> <select onchange="change_myselect(this.value)"> <option value="">Choose an option</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option> </select> <p id="showSelection"></p>

在change_myselect ，代码检查辅助对象是否包含与传递的字符串同名的方法。 为此，我们使用括号表示法，其中括号中的字符串被评估为括号之前对象的属性。 如果找到传递的属性，代码将再次使用括号表示法调用handlers对象中的方法。 注意行尾的括号。 辅助方法然后调用实际的函数来完成这项工作。

如果您只有要调用的customer函数，则只需将引用其他函数的方法从辅助对象中删除即可。 您还可以通过将函数的代码直接放在handlers对象的方法中来简化代码。

Answer 2

上面代码的问题似乎是您所指的

this.value

您可以重新访问您的change_myselect函数以将event作为参数，然后从事件中提取选定的值，例如：

var change_myselect = function(event) {
  var selectedValue = event && event.target && event.target.value || '';
  return selectedValue || '';
};

确保您还修改了代码的 HTML 部分以将事件作为参数传递：

<select onchange="change_myselect(event)">

您也可以将change_myselect输出存储在另一个变量中，以便在您的 http 请求逻辑中使用。

Answer 3

您实际上不会在任何地方使用您的选择值或执行任何 xhr 请求。 尝试将您的 js 代码更改为如下所示：

 function performXhr(entity) {
      var xmlhttp,
        myObj,
        i,
        tbl = "";

      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          myObj = JSON.parse(this.responseText);
          tbl += '<table border="1">';
          for (i in myObj) {
            tbl += "<tr><td>" + myObj[i] + "</td></tr>";
          }
          tbl += "</table>";
          document.getElementById("showSelection").innerHTML = tbl;
        }
      };

      xmlhttp.open("GET", `${entity}.txt`, true);
      xmlhttp.send();
    }

和你的 HTML 标记

    <select onchange="performXhr(this.value)">
      <option value="">Choose an option</option>
      <option value="customers">Customers</option>
      <option value="products">Products</option>
      <option value="suppliers">Suppliers</option>
    </select>

如何在 JavaScript 中放置在事件处理程序中的函数中获取 this.value 作为参数？

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-02-06 18:32:52

解决方案2
1 2020-02-06 16:03:42

解决方案3
1 2020-02-06 16:03:47

如何在 JavaScript 中放置在事件处理程序中的函数中获取 this.value 作为参数？

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-02-06 18:32:52

解决方案2 1 2020-02-06 16:03:42

解决方案3 1 2020-02-06 16:03:47

解决方案1
2 已采纳 2020-02-06 18:32:52

解决方案2
1 2020-02-06 16:03:42

解决方案3
1 2020-02-06 16:03:47