Одна функция активируется двумя кнопками

Question

У меня есть два buttons и один function, называемый 'starta', и у него parameter 'oi'.

Мой вопрос, не должен ли button с идентификатором 'ooii' просто работать, а не оба? Может кто-нибудь объяснить, почему обе эти кнопки работают?

function starta(oi) {
  document.getElementById(oi).style.backgroundColor = "green";
}

button.rond {
  width: 60px;
  height: 60px;
}

<table>
  <tr>
    <td class="np"><button style="background-color:yellow" id="y" class="rond" onclick="starta('y')">alotus</button></td>
  </tr>
  <tr>
    <td class="np"><button style="background-color:yellow" id="ooii" class="rond" onclick="starta('ooii')">alotus</button></td>
  </tr>
</table>

Answer 1

Когда вы нажимаете первую кнопку, starta вызывается с 'y' в качестве аргумента.

Итак, starta находит элемент с идентификатором, равным 'y' (это кнопка, которую вы только что нажали ) и делает его зеленым.

Когда вы нажимаете другую кнопку, это то же самое, но с 'ooii' в качестве аргумента, поэтому кнопка ТА становится зеленой.

---

Редактировать: О вашем комментарии ... Допустим, у вас есть эта функция:

function printThisArgument(myVariable) {
  console.log(myVariable);
}

Когда вы выполните printThisArgument('hello'), функция будет вызвана, и ее аргумент (myVariable) будет иметь значение 'hello', так что будет напечатано "привет".

Имя переменной не имеет значения.

Answer 2

В основном то, что вы делаете, вы даете function a parameter "oi"

        function starta(oi)

Затем вы используете это parameter как id :

        document.getElementById(oi)

Затем вы передаете своей функции значение (argument) идентификатора фактической нажатой кнопки, и она становится параметром

        onclick="starta('ooii')"
        onclick="starta('y')

Это в основном означает, что вы используете id "ooii" и "y" в качестве аргумента / значения для вашего параметра.

если вы нажмете "y", ваша функция будет выглядеть следующим образом:

function starta(y) {
document.getElementById(y).style.backgroundColor = "green";
        }

Если вы нажмете "ooii" Ваша функция выглядит следующим образом:

function starta(ooii) {
document.getElementById(ooii).style.backgroundColor = "green";
        }

Надеюсь, это поможет:)

РЕДАКТИРОВАТЬ:

Если вы хотите, чтобы работала только одна кнопка:

 function starta() {
   document.getElementById("ooii").style.backgroundColor = "green";
    }

IN HTML:

onclick="starta()"

Answer 3

Хотя неясно, каким было ваше намерение, ваш код работает правильно, как написано.

Две кнопки независимы, и когда вы нажимаете любую из них, присоединенная функция запускается и делает фон зеленым. Это одна и та же функция, и параметр «oi» ближе к одному имени, чем к другому, но это не имеет значения.