Javascript：如何获取单击按钮的innerHTML

问题描述 投票：0回答：6
javascript html
6个回答
5
投票

使用 HTML5 数据属性。

 <button type="button" data-tip="15" onclick="getTip(this)">15</button>

您传递给函数的参数

this
指的是正在单击的按钮。然后你就可以得到这样的属性值：

function tip(button){
   var tip= button.getAttribute("data-tip");
   ...
}

剩下的留给你了。

4
投票

像这样改变：将值传递给tip函数。

<button id="15" type="button" onclick="tip(15)">15</button>
<button id="18" type="button" onclick="tip(18)">18</button>  
<button id="20" type="button" onclick="tip(20)">20</button>

function tip(tip_value)
{
  /*use here tip_value as you wish you can use if condition to check the value here*/ 
  var totalBill = document.getElementById("bill").value;
  var totalTip = tip_value;
  var tip = totalBill * ("." + totalTip);
  document.getElementById("tip").innerHTML = "&#36;" +tip;
}
4
投票

将 

this.innerHTML
作为参数传递给您的小费函数。

所以你的小费函数应该是这样的：

function tip(totalTip) {
  var totalBill = document.getElementById("bill").value;
  var tip = totalBill * ("." + totalTip);
  document.getElementById("tip").innerHTML = "&#36;" +tip
}

因此，如果您有一个如下所示的按钮元素：

<button type="button" onclick="tip(this.innerHTML)">15</button>

提示函数将被称为 

tip(15)
。

2
投票

我会写一个快速解决方案，然后解释为什么我这样做。

建议的解决方案

第 1 部分，HTML

<div id="tip-wrapper">
        <label for="bill">Total bill:</label>
        <input name="bill" id="bill" type="text">
        <br/>

        <label for="tipratio">Tip ratio:</label>
        <button name="tipratio" value="15" type="button">15%</button>
        <button name="tipratio" value="18" type="button">18%</button>  
        <button name="tipratio" value="20" type="button">20%</button>

        <div id="final-value">You owe...</div>
 </div>

第 2 部分，JavaScript

var parent = document.getElementById('tip-wrapper'),
    buttons = parent.getElementsByTagName('button'),
    max = buttons.length,
    i;

// function that handles stuff
function calculate (e) {
    var bill = document.getElementById('bill'),
        tipRatio = e.target.value;


    document.getElementById('final-value').textContent = bill.value * (1+tipRatio/100);
}

// append event listeners to each button
for(i = 0; i < max; i++) {
    buttons[i].addEventListener('click', calculate, true);
}

说明

关于 HTML，并没有“太多”改变。唯一的事情是我使用的东西更符合标准。 我添加了一个 wrapper 元素，这只是为了隔离一些 DOM 遍历，而不是遍历整个文档对象来进行查找（这将加快您的脚本速度）。 您的按钮使用“值”属性，这是最好的。因为您可以以一种方式显示按钮文本，但使用正确的值（请参阅我添加了 % 字符）。 除此之外，我主要添加了适当的标识符和标签。

JavaScript，这是我将更详细地介绍的地方，我将逐步介绍：

  1. 您在脚本中要做的第一件事是设置您需要的变量（并获取您将使用的 DOM 元素。这就是我在前 4 行代码中所做的事情。
  2. 创建一个通用函数来处理您的计算并更新您的元素，无论其数值如何。我在这里使用的功能是向您的函数添加一个参数 (e)，因为 javascript 中的 EVENTS 将 EVENT OBJECT 附加到您的回调函数（在本例中为 
    calculate();
    ）。 EVENT OBJECT 实际上有很多有用的属性，我使用其中的： target：这是触发事件的元素（即您的按钮之一）

我们所要做的就是获取目标值 (

e.target.value
) 并将其用于返回最终账单的数学中。

  1. 使用addEventListener。人们普遍认为应该将 JavaScript 保留在 HTML 之外，因此不鼓励使用旧的事件方法 (onclick="")。 
    addEventListener()
    方法并不太复杂，不做详细介绍，其工作原理如下：
    • htmlObject.addEventListener('事件类型', '回调函数', '冒泡true/false');

我所做的只是循环遍历所有按钮并附加事件 lsitener。

结束语

使用此脚本，您现在可以添加任何您想要的“按钮”，脚本会将它们全部考虑在内并进行相应调整。只要确保设置它们的“值”即可。

当我写这篇文章时，一些人给出了一些快速的答案。我还不能发表评论（声誉低），所以我会在这里留下我的评论。

  1. 一些建议的答案告诉您使用innerHTML来获取小费值。这是错误的，您正在使用表单字段，应该使用 

    element.value
    ，这就是它的用途。

  2. 有些人甚至敢说使用 HTML5 data-* 属性。当然，你可以。但你为什么要这么做呢？ HTML 和 DOM 已经提供了完成任务所需的所有工具，而无需使用不必要的属性来污染 HTML。 value="" 属性旨在在表单中使用，它应该在字段值的 data-* 属性上使用。

  3. 一般来说，

    innerHTML
    旨在获取 HTML，而不一定是文本或值。还有其他方法可以获取您正在寻找的值。对于表单元素，它是 
    element.value
    ，对于大多数其他 HTML 元素，它是 
    element.textContent
    。

希望这些解释有帮助

1
投票

function tip(o) {

  var input = document.querySelector("input[id='bill']");  
  var total = input.value * o.innerHTML;
  
  document.querySelector("#tip").innerHTML = "&#36;" + total;
  
}
Total Bill: <input id="bill" type="text">
<button type="button" onclick="tip(this)">15</button>
<button type="button" onclick="tip(this)">18</button>  
<button type="button" onclick="tip(this)">20</button>
<div id="tip">You owe...</div>

0
投票

嘿我最近找到了解决这个问题的简单方法： 您可以将内部文本作为元素的 id 提供。在事件处理程序中，您可以通过以下方式访问内部文本： e.目标.id 希望这个解决方案可以帮助您:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.