单击任何按钮应显示该按钮的正确数字[关闭]答案

【问题标题】：On click of any button should display the correct number for that button [closed]单击任何按钮应显示该按钮的正确数字[关闭]
【发布时间】：2016-04-12 01:14:57
【问题描述】：

我是 js 新手
我正在尝试完成此任务--->单击任何按钮时应显示该按钮的正确编号。
我可以通过点击事件显示按钮
但不确定如何显示正确的数字
在下面提供我的代码
是否也可以使用闭包实现 schieve

https://jsfiddle.net/jcLr2kwL/

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

<button onclick="myFunction()">1</button>
<button onclick="myFunction()">2</button>
<button onclick="myFunction()">3</button>
<button onclick="myFunction()">4</button>
<button onclick="myFunction()">5</button>
<button onclick="myFunction()">6</button>

<p id="demo"></p>

【问题讨论】：

这可能是同一场景stackoverflow.com/questions/8801787/…
@all 为什么你们把它标记为负面，因为我试过了......但是卡住了
@texirv 不要亲自投反对票——尤其是在这个你没有积分可输的阶段。 SO 专为比您提出的更具体的编程问题而设计，但我们所有人都从您现在的位置开始，我们中的许多人都在理解。不要让少数“发痒的扳机手指”让你灰心。继续提问。经常问。多问。学习，贡献。对于那些回答问题的人，SO 就是要获得“分数”——所以（只要你有 15 分）就以任何方式对任何对你有帮助的答案投赞成票——并始终接受最佳答案（绿色复选标记）。祝你好运！

标签： javascript jquery css html

【解决方案1】：

myFunction() 由onclick(event){...} 调用，event 作为参数。
WebKit 遵循 IE 将event 传递给处理函数的旧行为。因此，在webkit 和IE 中，您可以在myFunction 中访问event 以获取event.target。

function myFunction() {
    document.getElementById("demo").innerHTML = event.target.innerHTML;
  }

检查下面的sn-p

function myFunction() {
  document.getElementById("demo").innerHTML = event.target.innerHTML;
}

<button onclick="myFunction()">1</button>
<button onclick="myFunction()">2</button>
<button onclick="myFunction()">3</button>
<button onclick="myFunction()">4</button>
<button onclick="myFunction()">5</button>
<button onclick="myFunction()">6</button>


<p id="demo"></p>

但是 Firefox 不会将事件传递给 handler functions，因此您可以通过编辑 myFunction() 以在 html 中接收参数 this 来实现您的目标（this 将引用 @ 987654337@)。

function myFunction(el) {
  document.getElementById("demo").innerHTML = el.innerHTML;
}

<button onclick="myFunction(this)">1</button>
<button onclick="myFunction(this)">2</button>
<button onclick="myFunction(this)">3</button>
<button onclick="myFunction(this)">4</button>
<button onclick="myFunction(this)">5</button>
<button onclick="myFunction(this)">6</button>

<p id="demo"></p>

【讨论】：

是否可以使用闭包实现:(

【解决方案2】：

如果您不想使用 jQuery，这可能会对您有所帮助： Fiddle

<body>
    <button onclick="myFunction(this)">1</button>
    <button onclick="myFunction(this)">2</button>
    <button onclick="myFunction(this)">3</button>
    <button onclick="myFunction(this)">4</button>
    <button onclick="myFunction(this)">5</button>
    <button onclick="myFunction(this)">6</button>


    <p id="demo"></p>

    <script>
      function myFunction(element) {
        document.getElementById("demo").innerHTML = element.innerHTML;
        console.log(element.innerHTML)
      }

    </script>

  </body>

【讨论】：

任何想法如何通过闭包实现:(

【解决方案3】：

你可以这样做。

function showNum(){
  var wew = $(this).text();
  console.log(wew)
  $('#demo').text(wew);
}

$('.btn').on('click', showNum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3. Test on JavaScript Closures - for loop with 5 Buttons. On click of any button should display the correct number for that button (Important). 

    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>


    <p id="demo"></p>

【讨论】：

任何想法如何通过闭包实现:(
检查新代码