Блог

Главная - Вопросы по программированию - Нумерация кнопок JS в предупреждении

Нумерация кнопок JS в предупреждении

#javascript

#javascript

Вопрос:

Я создал несколько коробок в формате 3х3. Я хочу, чтобы каждый шаблон сохранялся со значением от 1 до 9. Я не уверен, как именно это сделать.

Мой текущий код таков:

 function myFunction() {
  alert("Alert from box");
} 
 <!DOCTYPE html>
<html>
   <style>
    .prac {
      height: 150px;
      width: 50px;
      color: white;
      background-color: grey;
      border: 2px solid red;
      margin: 20px;
   </style>
   <body>
      <h2>Select a Discount Box!</h2>
      <button class="prac" onclick="myFunction()">One</button>
      <button class="prac" onclick="myFunction()">Two</button>
      <button class="prac" onclick="myFunction()">Three</button>
      <br>
      <button class="prac" onclick="myFunction()">Four</button>
      <button class="prac" onclick="myFunction()">Five</button>
      <button class="prac" onclick="myFunction()">Six</button>
      <br>
      <button class="prac" onclick="myFunction()">Seven</button>
      <button class="prac" onclick="myFunction()">Eight</button>
      <button class="prac" onclick="myFunction()">Nine</button>


   </body>
</html>

В настоящее время он просто возвращает одно и то же предупреждение для всех из них. Я хочу, чтобы он оповещал о том же сообщении плюс о количестве нажатых кнопок.

Комментарии:

1. можно себе представить, что установка onclick на myFunction(1) и myFunction(2) и т. Д. … myFunction(9) Достаточно хороша?

2. Согласно вашему коду, вы не передали никакого номера функции, которая показывает предупреждение, и не включили никакого номера в текст предупреждения. Я что-то здесь упускаю?

Ответ №1:

Вы можете либо передать аргумент напрямую, написав onclick="myfunction(1)" , либо использовать некоторую дополнительную разметку, чтобы присвоить кнопкам некоторые идентификаторы и написать onclick="myfunction(this.id)" Я продемонстрирую последнее:

 <!DOCTYPE html>
<html>
<body>

<h2>Select a Discount Box!</h2>

<button id="1" class="prac" onclick="myFunction(this.id)">One</button>
<button id="2" class="prac" onclick="myFunction(this.id)">Two</button>
<button id="3" class="prac" onclick="myFunction(this.id)">Three</button>
<br>
<button id="4" class="prac" onclick="myFunction(this.id)">Four</button>
<button id="5" class="prac" onclick="myFunction(this.id)">Five</button>
<button id="6" class="prac" onclick="myFunction(this.id)">Six</button>
<br>
<button id="7" class="prac" onclick="myFunction(this.id)">Seven</button>
<button id="8" class="prac" onclick="myFunction(this.id)">Eight</button>
<button id="9" class="prac" onclick="myFunction(this.id)">Nine</button>


<script>
function myFunction(id) {
  alert("Alert from box "   id);
}
</script>

<style>
.prac {
height: 150px;
width: 50px;
color: white;
background-color: grey;
border: 2px solid red;
margin: 20px;

</style>
</body>
</html>

Редактировать: второй подход, который реорганизует, чтобы быть немного более эффективным. Программно назначает обработчик нажатия и извлекает идентификатор целевого события.

 <!DOCTYPE html>
<html>
<body>

<h2>Select a Discount Box!</h2>

<button id="1" class="prac">One</button>
<button id="2" class="prac">Two</button>
<button id="3" class="prac">Three</button>
<br>
<button id="4" class="prac">Four</button>
<button id="5" class="prac">Five</button>
<button id="6" class="prac">Six</button>
<br>
<button id="7" class="prac">Seven</button>
<button id="8" class="prac">Eight</button>
<button id="9" class="prac">Nine</button>


<script>
for (let elem of document.getElementsByClassName('prac')) {
  elem.addEventListener('click', myFunction);
}

function myFunction(e) {
  alert("Alert from box "   e.target.id);
}
</script>

<style>
.prac {
height: 150px;
width: 50px;
color: white;
background-color: grey;
border: 2px solid red;
margin: 20px;

</style>
</body>
</html>