0

所以我有 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;
  }


}
4

4 回答 4

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>

于 2018-10-21T21:25:22.623 回答
1

从 HTML 中删除内联 JS 并仅使用 JS DOM 函数会更好。在这里，我为按钮添加了一个父元素——可以附加buttons一个事件处理程序。在 JS 中，事件“冒泡” 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>

于 2018-10-21T21:29:35.773 回答
0

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

正如@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>

于 2018-10-21T21:23:45.710 回答
0

您的代码 JS 代码中的小改动：

函数 myFunction(btn)
{
  var p = document.getElementById("mydata"); // 获取段落

    p.innerHTML = "结果 = " + btn.innerHTML;

}

将myFunction()替换为myFunction(this)

于 2018-10-21T21:36:17.360 回答