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

Question

构建了一个小费计算器，但想通过获取被点击按钮的 innerHTML 来缩短代码。

Total Bill: <input id="bill" type="text">
<button type="button" onclick="tip15()">15</button>
<button type="button" onclick="tip18()">18</button>  
<button type="button" onclick="tip20()">20</button>
<div id="tip">You owe...</div>


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

这种方法的问题是我必须写出三个版本的函数来对应小费金额。我想创建一个函数来获取被单击按钮的 innerHTML 并在函数中使用该值。我希望它看起来像这样

function tip(){
var totalBill = document.getElementById("bill").value;
**var totalTip = GET INNERHTML OF CLICKED BUTTON**
var tip = totalBill * ("." + totalTip);
document.getElementById("tip").innerHTML = "$" +tip
}

这样我就可以在不同的按钮上运行相同的功能。

Answer 1

使用 HTML5 数据属性。

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

您传递给函数的参数this 指的是正在单击的按钮。然后你得到这样的属性值：

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

剩下的留给你。

Answer 2

像这样改变：将值传递给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;
}

Answer 3

将this.innerHTML 作为参数传递给您的tip 函数。

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

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

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

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

提示函数将被称为tip(15)。

Answer 4

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

建议的解决方案

第 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('事件类型', '回调函数', '气泡真/假');

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

结语

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

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

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

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

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

希望这些解释有所帮助

Answer 5

function tip(o) {

  var input = document.querySelector("input[id='bill']");  
  var total = input.value * o.innerHTML;
  
  document.querySelector("#tip").innerHTML = "$" + 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>