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 = "&#36;" +tip
}

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

Answer 1

像这样改变：将值传递给提示功能。

<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 2

将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)。

Answer 3

使用HTML5数据属性。

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

您传递给该函数的参数this指的是被点击的按钮。然后你得到这个属性的值：

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

我把剩下的留给你了。

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，而不是＆＃34;很多＆＃34;已经改变。唯一让我使用的东西更符合标准。我添加了一个包装器元素，这只是为了隔离一些DOM遍历而不是遍历整个文档对象来进行查找（这会加快你的脚本）。你的按钮使用＆＃34;值＆＃34;属性，这是最好的。由于您可以单向显示按钮文本，但使用正确的值（请参阅我添加了％字符）。除此之外，我主要添加了适当的标识符和标签。

JavaScript，这是我将详细介绍的内容，我将一步一步走：

你想在脚本中做的第一件事就是设置你需要的变量（并获取你将要使用的DOM元素。这就是我在前4页所做的事情。代码行。
创建一个通用函数，它将处理您的计算并更新元素，无论它们的数值如何。我在这里使用的功能是在你的函数中添加一个参数（e），因为javascript中的EVENTS将一个EVENT OBJECT附加到你的回调函数（在这种情况下是calculate();）。 EVENT OBJECT实际上有一堆有用的属性，我使用它们：目标：这是触发事件的元素（即您的某个按钮）

我们所要做的就是抓住目标的价值（e.target.value）并在返回最终账单的数学中使用它。

使用addEventListener。大家普遍同意，您应该将JavaScript保留在HTML之外，因此不鼓励使用旧的事件方法（onclick =＆＃34;＆＃34;）。 addEventListener()方法并不复杂，如果不详细说明，它的工作原理如下：
- htmlObject.addEventListener（＆＃39;事件类型＆＃39;，＆＃39;回调函数＆＃39;，＆＃39; bubbles true / false＆＃39;）;

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

结束记录

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

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

一些建议的答案告诉您使用innerHTML来获取提示值。这是错误的，您使用的是表单字段，应该使用element.value来表示它的用途。
有些人甚至敢说使用HTML5 data- *属性。当然，你可以。但你为什么要这样？ HTML和DOM已经提供了完成任务所需的所有必要工具，而无需使用不必要的属性来规范HTML。价值=＆＃34;＆＃34; attribute应该在表单中使用，它应该用于字段值的data- *属性。
一般来说，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 = "&#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>

Javascript：如何获得clickHTML的点击按钮

5 个答案: