Question

因此，我有4个按钮，当我单击或按钮时，它应显示我单击的结果为“结果=（按钮编号）”。如果我尝试创建else语句，它将仍然无法正常工作。如何做到这一点，以便在单击特定按钮时显示该按钮编号

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 2 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task2.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p style="font-family: monospace;" id="mydata">Result  </p>

<!-- Create 4 Click buttons -->

  <!-- Number 10 -->
  <p> <button  onclick="myFunction();"> 10 </button></p>

  <!-- Number 20 -->
  <p> <button id="twenty" onclick="myFunction();"> 20 </button></p>

  <!-- Number 30 -->
  <p> <button id="thirty" onclick="myFunction();"> 30 </button></p>

  <!-- Number 40 -->
  <p> <button id="fourty" onclick="myFunction();"> 40 </button></p>


</div>
</body>
</html>

还有我的JS

var num1 = 10
var num2 = 20
var num3 = 30
var num4 = 40

function myFunction()
{

  var p = document.getElementById("mydata"); // get the paragraph

  if (num1 == 10)
  {
    p.innerHTML = "Result = " + num1;
  }


}

Answer 1

您实际上不应该使用内嵌javascript（onclick，...）。而是在容器框上为按钮分配一个事件侦听器，然后侦听单击并使用数据属性

document.getElementById('btn-group').addEventListener('click', e => {
  const no = e.target.getAttribute('data-number');
  if (no)
    document.getElementById('mydata').innerText = 'Result: ' + no;
})

#btn-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#btn-group>button {
  margin: 2px;
}

.my-font {
  font-family: monospace;
}

<div id="btn-group">
  <button data-number="10"> 10 </button>
  <button data-number="20"> 20 </button>
  <button data-number="30"> 30 </button>
  <button data-number="40"> 40 </button>
</div>
<p class="my-font" id="mydata">Result: </p>

Answer 2

您最好从HTML中删除内联JS，而仅使用JS DOM函数。在这里，我为按钮添加了一个父元素-buttons，可以将单个事件处理程序附加到该元素。 In JS, events "bubble up" the DOM。除了在每个按钮上附加侦听器外，我们还可以在父级上有一个侦听器，以在事件冒泡时捕获事件。然后，使用target属性，可以确定单击了哪个按钮。

// grab the output element
const mydata = document.getElementById('mydata');

// grab the element with the buttons class and add an event listeners
// this listener will catch the events from clicked buttons
// and call `handleClick`
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick, false);

function handleClick(e) {

  // set the text content of the output element to the
  // clicked button's text content
  mydata.textContent = e.target.textContent;
}

<section class="buttons">
  <button>10</button>
  <button>20</button>
  <button>30</button>
  <button>40</button>
  </section>
<p id="mydata"></p>

Answer 3

您需要将单击的值传递给该函数，以便您在函数内部知道单击了什么。

正如@bambam所述，肯定有更好的方法来解决此问题。主要是innerHTML可能会带来HTML注入的风险。

这是您改编的示例：

function myFunction(clickedValue) {
    var p = document.getElementById("mydata"); // get the paragraph
    p.innerHTML = "Result = " + clickedValue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Task 2 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task2.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p style="font-family: monospace;" id="mydata">Result  </p>

<!-- Create 4 Click buttons -->

  <!-- Number 10 -->
  <p> <button  onclick="myFunction(10);"> 10 </button></p>

  <!-- Number 20 -->
  <p> <button id="twenty" onclick="myFunction(20);"> 20 </button></p>

  <!-- Number 30 -->
  <p> <button id="thirty" onclick="myFunction(30);"> 30 </button></p>

  <!-- Number 40 -->
  <p> <button id="fourty" onclick="myFunction(40);"> 40 </button></p>

</div>
</body>
</html>

Answer 4

您的代码JS代码中的小变化：

function myFunction(btn)
{
  var p = document.getElementById("mydata"); // get the paragraph

    p.innerHTML = "Result = " + btn.innerHTML;

}

用 myFunction（this）

替换 myFunction（）

HTML + Javascript按钮选择

4 个答案: