HTML+；Javascript按钮选择_Javascript_Html

HTML+；Javascript按钮选择

javascript html

HTML+；Javascript按钮选择,javascript,html,Javascript,Html,所以我有4个按钮，当我点击或按钮时，它应该显示我点击的数字“Result=（按钮编号）。”如果我尝试创建else语句，它仍然不起作用。我如何使它，如果我点击一个特定的按钮，按钮编号将显示我的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Task 2 </title> <link href="style.css"

所以我有4个按钮，当我点击或按钮时，它应该显示我点击的数字“Result=（按钮编号）。”如果我尝试创建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>

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

正如@bambam所提到的，当然有更好的方法来解决这个问题。主要是

innerHTML

可能会对HTML注入造成风险

以下是您的示例：

函数myFunction（单击值）{
var p=document.getElementById（“mydata”）；//获取段落
p、 innerHTML=“Result=”+clickedValue；
}


任务2
结果
十,
二十
三十
四十

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

正如@bambam所提到的，当然有更好的方法来解决这个问题。主要是

innerHTML

可能会对HTML注入造成风险

以下是您的示例：

函数myFunction（单击值）{
var p=document.getElementById（“mydata”）；//获取段落
p、 innerHTML=“Result=”+clickedValue；
}


任务2
结果
十,
二十
三十
四十

您真的不应该使用内联javascript（

onclick

，…）。相反，在容器框上为按钮指定一个事件侦听器，然后侦听单击并使用数据属性

document.getElementById（'btn-group'）。addEventListener（'click'，e=>{
const no=e.target.getAttribute（'data-number'）；
如果（否）
document.getElementById（'mydata'）。innerText='Result:'+no；
})

#btn组{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
#btn组>按钮{
保证金：2倍；
}
.我的字体{
字体系列：monospace；
}

您真的不应该使用内联javascript（

onclick

，…）。相反，在容器框上为按钮指定一个事件侦听器，然后侦听单击并使用数据属性

document.getElementById（'btn-group'）。addEventListener（'click'，e=>{
const no=e.target.getAttribute（'data-number'）；
如果（否）
document.getElementById（'mydata'）。innerText='Result:'+no；
})

#btn组{
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
#btn组>按钮{
保证金：2倍；
}
.我的字体{
字体系列：monospace；
}

您最好从HTML中删除内联JS，只使用JS DOM函数。在这里，我为按钮添加了一个父元素-

buttons

，可以将单个事件处理程序附加到该元素。不必将侦听器附加到每个按钮，我们可以在父按钮上有一个侦听器，在事件冒泡时捕捉事件。使用

target

属性，我们可以计算出单击了什么按钮

//获取输出元素
const mydata=document.getElementById（'mydata'）；
//使用buttons类获取元素并添加事件侦听器
//此侦听器将从单击的按钮捕获事件
//叫“handleClick”`
const buttons=document.querySelector（'.buttons'）；
按钮。addEventListener（'click'，handleClick，false）；
函数handleClick（e）{
//将输出元素的文本内容设置为
//单击按钮的文本内容
mydata.textContent=e.target.textContent；
}

最好从HTML中删除内联JS，而只使用JS DOM函数。在这里，我为按钮添加了一个父元素-

buttons

，可以将单个事件处理程序附加到该元素。不必将侦听器附加到每个按钮，我们可以在父按钮上有一个侦听器，在事件冒泡时捕捉事件。使用

target

属性，我们可以计算出单击了什么按钮

//获取输出元素
const mydata=document.getElementById（'mydata'）；
//使用buttons类获取元素并添加事件侦听器
//此侦听器将从单击的按钮捕获事件
//叫“handleClick”`
const buttons=document.querySelector（'.buttons'）；
按钮。addEventListener（'click'，handleClick，false）；
函数handleClick（e）{
//将输出元素的文本内容设置为
//单击按钮的文本内容
mydata.textContent=e.target.textContent；
}

代码中的小改动：

function myFunction(btn) { var p = document.getElementById("mydata"); // get the paragraph p.innerHTML = "Result = " + btn.innerHTML; } 函数myFunction（btn） { var p=document.getElementById（“mydata”）；//获取段落 p、 innerHTML=“Result=”+btn.innerHTML； }

将myFunction（）替换为myFunction（this）

代码中的小改动JS代码：

将myFunction（）替换为myFunction（此）

如果您打算使用它，可能值得解释事件传播或链接到有关它的文章。如果您打算使用它，可能值得解释事件传播或链接到有关它的文章。