HTML + Javascript按钮选择
HTML + Javascript按钮选择
提问于 2018-10-22 05:13:14
所以我有4个按钮，当我点击或按钮时，它应该显示我用"Result = (the button number )“点击的数字。如果我尝试创建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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-22 05:23:46
您需要将单击的值传递给函数，以便知道函数内部单击了什么。
正如@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>
Stack Overflow用户
发布于 2018-10-22 05:25:23
你真的不应该使用内联javascript (onclick，...)。相反，应该在容器框上为按钮分配一个事件侦听器，然后侦听点击并使用data-attribute
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52919937
复制相关文章
相似问题