[英]HTML + Javascript button selection
因此，我有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;
}
}
您确实不应该使用内联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>
您最好从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>
您需要将单击的值传递给该函数，以便您知道在函数内部单击了什么。
正如@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>
您的代码JS代码中的小变化：
function myFunction(btn)
{
var p = document.getElementById("mydata"); // get the paragraph
p.innerHTML = "Result = " + btn.innerHTML;
}
将myFunction（）替换为myFunction（this）
Html / javascript - 下拉选择不适用于提交按钮
[英]Html / javascript - Dropdown selection not working with Submit button
HTML，JavaScript-单选按钮选择不会显示在新行中
[英]HTML, JavaScript - Radio Button Selection Doesn't Display In New Row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.