如何将 getElementById 中的 ID 号存储在变量中，然后在 onClick 事件中使用它？

Question

我正在尝试通过使用一个函数在单击按钮时更改浏览器中的 href 地址来从我的 esp8266 脚本中删除一些代码。我希望将 ID 编号存储在变量中，以便在单击该特定按钮 ID 时可以重新使用它来设置 PIN 编号。

function myFunction() {
  console.log("button was clicked");
  var x = document.getElementById(Element.id);
  console.log(x);

  document.getElementById(x).setAttribute("onClick",
      "javascript:window.location.href='/toggle?pin_number='" + x);
}

<button class="button" id="4" onClick="myFunction()">TOGGLE D4</button><br>
<button class="button" id="5" onClick="javascript:window.location.href='/toggle?pin_number=5'">TOGGLE D5</button><br>
<button class="button" id="6" onClick="javascript:window.location.href='/toggle?pin_number=6'">TOGGLE D6</button><br>

console.log(x) returns null.

我不知道这是否是最好的方法，因为我是 javascript 的新手。

Answer 1

您需要将元素传递给您的函数。

<button class="button" id="4" onClick="myFunction(this)">TOGGLE D4</button>

然后，在函数中，接受一个接受元素的参数（在本例中我们称之为 e）。

function myFunction(e) {
  console.log("button was clicked");
  console.log(e);
}

现在，如果您想获取被单击的元素 id，只需访问 id 属性，例如：

console.log(e.id);

另一方面，HTML5 不再那么严格了，但是 HTML4 used to have these rules 对于 id:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

It's a good idea to stick with these rules.

使用value属性会更好：

<button class="button" value="4" onClick="myFunction(this)">TOGGLE D4</button>

然后使用e.value:

function myFunction(e) {
  console.log("button was clicked:", e.value);
}

Answer 2

谢谢大家。我现在明白了。

function myFunction(x) {
console.log(x.id);
window.location.href='/toggle?pin_number=' + x.id;
}

已经过测试并且可以正常工作:)

Answer 3

你不需要重复代码，这里有一段简短的代码来做你想做的事：

document.querySelectorAll('.button').forEach(function(b) {//<-- iterates the buttons

  b.addEventListener("click", function(t) {//<-- adds event listener
  
    console.log(t.target.id)//<-- we get the data
    
  })
  
});

<button class="button" id="4">TOGGLE D4</button><br>
<button class="button" id="5">TOGGLE D5</button><br>
<button class="button" id="6">TOGGLE D6</button><br>

我们为每个按钮添加一个事件侦听器，然后我们使用 event.target.id

获取 id

如何将 getElementById 中的 ID 号存储在变量中，然后在 onClick 事件中使用它？

How do I store the id number from getElementById in a variable and then use it in an onClick event?

html

javascript

esp8266