Question

JS：

function selectPeg(element) {
    var id = element.id;
    var color = document.getElementById(id).getAttribute("data-color");
    return color;
}

var v = selectPeg(this);
console.log(v);

HTML：

<table>
    <tr>
        <td><div id="selectpeg1" onclick="selectPeg(this)" data-color="yellow"></div></td>
        <td><div id="selectpeg2" onclick="selectPeg(this)" data-color="blue"></div></td>
        <td><div id="selectpeg3" onclick="selectPeg(this)" data-color="red"></div></td>
        <td><div id="selectpeg4" onclick="selectPeg(this)" data-color="green"></div></td>
    </tr>
</table>

我需要传递＆＃34;颜色＆＃34; selectPeg（...）函数返回另一个变量，但是当我玩代码时，这似乎给了我不同的错误。任何人都知道如何将返回颜色放入＆＃34; v＆＃34;变量？

Answer 1

<table>
    <tr>
        <td><div id="selectpeg1" onclick="selectPeg(this)" data-color="yellow">yellow</div></td>
        <td><div id="selectpeg2" onclick="selectPeg(this)" data-color="blue">blue</div></td>
        <td><div id="selectpeg3" onclick="selectPeg(this)" data-color="red">red</div></td>
        <td><div id="selectpeg4" onclick="selectPeg(this)" data-color="green">green</div></td>
    </tr>
</table>

{{1}}

Answer 2

如果从全局范围调用它，则行var v = selectPeg(this);会导致错误。原因是this的值是窗口，而selectPeg函数内部，element.id会给出未定义的值。

您可以先选择元素来调用selectPeg。

var elem = document.getElementById('selectpeg1');

然后致电

var v = selectPeg(elem);

另请注意，函数document.getElementById(id)中不需要调用selectPeg。因此，在点击事件的情况下，您将获得该元素，无需再次获取ID并调用getElementById。

如果你想要颜色值，那么你可以在函数外部声明变量并将其填充到函数内部，如下所示：

＆＃13;

var v;

function selectPeg(element) {
  //var id = element.id;
  //var color = document.getElementById(id).getAttribute("data-color");
  var color = element.getAttribute("data-color");
  v = color;

}

document.getElementById('btn').onclick = function() {
  console.log(v);
}

＆＃13;

<table>
  <tr>
    <td>
      <div id="selectpeg1" onclick="selectPeg(this)" data-color="yellow">1</div>
    </td>
    <td>
      <div id="selectpeg2" onclick="selectPeg(this)" data-color="blue">2</div>
    </td>
    <td>
      <div id="selectpeg3" onclick="selectPeg(this)" data-color="red">3</div>
    </td>
    <td>
      <div id="selectpeg4" onclick="selectPeg(this)" data-color="green">4</div>
    </td>
  </tr>
</table>
<button id="btn">getV</button>

＆＃13;

因此，在代码中，您单击并将值存储在v中，然后在单击按钮getV后获取值。

将返回函数分配给另一个变量（this）

2 个答案: