Question

我花了几个小时在谷歌上搜索和浏览W3Schools，却无法找到一种完全符合我想要的方法。我找到了类似的文章，但他们没有完全回答我的问题。

所以我要做的就是创建一个JS函数，当用HTML调用时，它将获取给出的信息以返回相应的信息。 E.G，我希望有两个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>

我的HTML：

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

我仍然在学习Javascript的来龙去脉，所以我们将不胜感激。

Answer 1

是的，将参数括在引号

中

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

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

Answer 2

插入前应该innerHTML。另请注意，您必须传递id中包含的quotes(')个属性。

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>

Answer 3

您可以放置内联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);
});

JS函数中调用的变量ID

3 个答案: