Как сохранить номер идентификатора из getElementById в переменной, а затем использовать его в событии onClick? - PullRequest
Новая
       9

Как сохранить номер идентификатора из getElementById в переменной, а затем использовать его в событии onClick?

0 голосов
/ 03 сентября 2018

Я пытаюсь вырезать некоторый код из моего esp8266 сценария с помощью функции изменения адреса href в браузере при нажатии кнопки. Я хочу, чтобы номер идентификатора был сохранен в переменной, чтобы я мог повторно использовать его для установки номера пин-кода, если этот конкретный идентификатор кнопки нажимается. 

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) возвращает null.

Я не знаю, является ли это лучшим способом сделать это или нет, потому что я новичок в javascript.

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

Спасибо, ребята. Я понял это сейчас. 

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

проверено и работает:)

0 голосов
/ 03 сентября 2018

Вам не нужно дублировать код, вот короткий код, чтобы сделать то, что вы хотите: 

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

0 голосов
/ 03 сентября 2018

Вам нужно передать элемент в вашу функцию. 

<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 имел эти правила для идентификатора:

Жетоны ID и ИМЯ должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний (" _ "), двоеточия (": ") и точки (". ").

Это хорошая идея до придерживаться этих правил .

Еще лучше использовать атрибут value: 

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

А затем используйте e.value: 

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