一个功能由两个按钮激活答案

【问题标题】：One function activated by two buttons一个功能由两个按钮激活
【发布时间】：2020-01-19 17:06:21
【问题描述】：

我有两个buttons 和一个function 称为'starta'，它有parameter'oi'。

我的问题是，ID 为 'ooii' 的 button 不应该正常工作，而不应该同时工作吗？有人能解释一下这两个按钮都起作用的原因吗？

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>

【问题讨论】：

oi 是一个变量，与 ID 为 "ooii" 的字符串或元素无关，尽管有（某种）相似性。为什么不在document.getElementById 上方添加console.log(oi)？然后，尝试将oi 更改为adhajsdasgdasgdh，看看它是否仍然有效。

标签： javascript html css function button

【解决方案1】：

基本上你正在做的是，你给你的function一个parameter“oi”

        function starta(oi)

然后你使用parameter作为id：

        document.getElementById(oi)

然后你将实际点击按钮的 id 的值 (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";
    }

在 HTML 中：

onclick="starta()"

【讨论】：

谢谢你的好答案，函数中的参数名称是否应该与 getElementById 相同（这里是这个？），我的意思是为什么这在这里不起作用：function starta(oi) { document.getElementById(kj ).style.backgroundColor = "绿色"; } ?对不起，如果它不是直接相关的问题
它不一定必须相同，但在您的情况下，如果您希望两个按钮都可以工作，那么可以。如果你给 document.getElmentById() 一个未定义的参数 (kj) 那么这显然行不通，因为没有 id="kj" 并且传递的参数是用 "oi" 定义的。希望这对你有意义。
我的意思是为什么我在这里放了不同的名字但不起作用：

你必须把“kj”放在引号里：document.getElementById("kj")

【解决方案2】：

当你点击第一个按钮时，starta 被调用，'y' 作为参数。

所以starta 找到 id 等于 'y' 的元素（它是您刚刚按下的按钮）并将其变为绿色。

当你按下另一个按钮时，它是同样的事情，但以'ooii'为参数，所以那个按钮变成绿色。

编辑：关于您的评论...假设您有此功能：

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

当您执行printThisArgument('hello') 时，将调用该函数并且其参数（myVariable）将具有值'hello'，因此它将打印“hello”。

变量名无关。

【讨论】：

感谢您提供与此相关的另一个好答案，函数中的参数名称是否应与 getElementById 相同（此处为这个？），我的意思是为什么这在这里不起作用：function starta(oi) { document.getElementById(kj).style.backgroundColor = "green"; } ?对不起，如果它不是直接相关的问题。
@waleedd32 您的kj 变量未定义。 starta 函数的参数名为oi，按下按钮调用带有oi = 'ooii' 的函数。你不应该改变getElementById，但是你应该改变按钮的onclick来调用starta，以'kj'作为参数值，而不是'ooii'，就像这样：onclick="starta('kj')"。
@waleedd32 为了更容易理解，在您的函数中将oi 更改为theIdToMakeGreen。

【解决方案3】：

虽然不清楚您的意图是什么，但您的代码可以正常运行。

这两个按钮是独立的，当你点击其中一个时，附加的功能就会运行，并使背景变为绿色。恰好是同一个函数，参数“oi”比另一个更接近一个名字，但这没关系。

【讨论】：