在 JS 函数中调用的变量 ID

Variable Id Called in JS Function

本文关键字：变量 ID 调用 JS 函数      更新时间：2023-09-26

在过去的几个小时里，我一直在谷歌上搜索和浏览W3Schools，但找不到一种方法来做我想做的事情。我找到了类似的文章，但它们并没有完美地回答我的问题。

所以我要做的是，创建一个JS函数，当在HTML中调用时，它将获取给定的信息以返回适当的信息。例如，我希望有两个HTML按钮。如果用户按下第一个按钮，它会调用函数"onclick='show(x， y('"，x和y代表另一个段落和一个图像。如果用户按下第二个按钮，它会使用不同的变量"onclick='show(x， z('"调用相同的函数，该变量将显示与另一个按钮相同的段落，但将显示不同的图像。

基本上，HTML 元素是否有可能在 JS 中具有可变的 ID，这样我就不必为每个按钮创建一个单独的 JS 函数？

我的Javascript：

<script>
 var Show = function(elID, elID2) {
 var el1 = document.getElementByID(elID);
 var el2 = document.getElementByID(elID2);
 var both = (elID) + " " + (elID2);
 document.getElementById(elID).innerHTML = both;
}
</script>

我的网页：

<p id="demo">
 <button onclick="Show(77, demo)">Click to convert</button>
</p>

我仍在学习Javascript的来龙去脉，因此任何和所有帮助将不胜感激。

是的，将参数括在引号中

<button onclick="Show('77', 'demo')">Click to convert</button>

没有引号77将被正确传递，但 demo 不会，因为它将在window范围内查找demo属性。

您应该在插入之前获得innerHTML。另请注意，您必须传递包装在 quotes(') 中的id属性。

ID 属性应至少包含一个字符，并且不应以 NUMBER 开头 

function Show(elID, elID2) {
  var el1 = document.getElementByID(elID).innerHTML;
  var el2 = document.getElementByID(elID2).innerHTML;
  var both = (elID) + " " + (elID2);
  document.getElementById(elID).innerHTML = both;
}

<p id="demo">
  <button onclick="Show('77', 'demo')">Click to convert</button>
</p>

你可以把内联JavaScript放在一边，选择一种不同的方式，将你的标记与你的逻辑分开。

https://jsfiddle.net/tricon/p2esv818/

.HTML：

<button id="button" data-parameter-one='{ "keyOne": "valueOne", "keyTwo": "valueTwo" }'>
    Some button
</button>

JavaScript：

var button = document.getElementById("button");
button.addEventListener("click", function() {
  var parameters = this.getAttribute("data-parameter-one");
  parameters = JSON.parse(parameters);
  console.log(parameters);
});
相关文章：