1. 首页
  2. 问答
  3. 如何添加一个按钮，将按钮旁边的输入添加到答案中？

如何添加一个按钮，将按钮旁边的输入添加到答案中？

2017-08-31 67 views
0

我在这里写了这段代码，但是我想添加一些我想要的帮助，而不是主编码器，我不知道该怎么做。如何添加一个按钮，将按钮旁边的输入添加到答案中？

这里是我到目前为止的代码

function calculate() { 
 
    var A = document.getElementById("a").value; 
 
    var B = document.getElementById("b").value; 
 
    var C = document.getElementById("c").value; 
 
    var D = document.getElementById("d").value; 
 

 
    var ans = ((A * B) - (C * D))/(B - C); 
 
    alert(ans); 
 
}
* { 
 
    font-family: arial; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 40px; 
 
    background-color: #05537b; 
 
} 
 

 
.thisTable td { 
 
    line-height: 36px; 
 
    font-size: 14px; 
 
} 
 

 
.container { 
 
    background-color: #EEE; 
 
    padding: 5px 15px 15px 15px; 
 
    border: 1px solid #CCC; 
 
    margin-bottom: 25px; 
 
    width: 100%; 
 
    text-align: left 
 
} 
 

 
.box { 
 
    background-color: #FFF; 
 
    border: 1px solid #CCC; 
 
    width: 40px; 
 
    margin: 0px 4px; 
 
} 
 

 
.button { 
 
    margin-left: 10px; 
 
    background-color: #333; 
 
    border: 1px solid #CCC; 
 
    width: 25px; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.answer { 
 
    padding-left: 10px 
 
} 
 

 
.answer b { 
 
    text-decoration: underline 
 
} 
 

 
.how { 
 
    color: #555; 
 
    margin-left: 15px; 
 
    font-size: 13px; 
 
    background-color: #FFF; 
 
    padding: 2px 4px 
 
} 
 

 
.how b { 
 
    color: #D00; 
 
    font-weight: bold; 
 
    text-decoration: none 
 
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px"> 
 
    <div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div> 
 
    <div class=container> 
 
     <h3>Calculate Target Average</h3> 
 
     <table class=thisTable> 
 
     <tr> 
 
      <td>Type in your target average damage <input type='number' id='a' /> </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td> 
 
      <tr> 
 
      <td>Type in your current number of battles <input type='number' id='c' /></td> 
 
      <tr> 
 
       <td>Type in your current average damage <input type='number' id='d' /></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <button onClick='calculate()'>calculate</button> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

目前，我有它，这样当该信息的用户类型和点击“计算”按钮，答案在弹出像一个小窗口。但我不希望发生这种情况。我想要发生的是，当你点击“计算”按钮时，答案（一个数字）将出现在正下方或旁边的按钮，而不是弹出屏幕上。我也想从这个具体的方面来改进答案，并且只有它围绕千分之一小数。

来源

2017-08-31 Johnny Snippit

+0

我只得到像'175'答案。用小数给出答案的典型输入是什么？ – Thijs

+0

@thijs我应该添加背景故事。伤害投入将会在数千人（2450或3300）以及战斗将会在数百人（350,678）中用于视频游戏:) –

+0

因此，目标伤害3300，达到100次战斗，当前战斗350和目前的伤害2800.像这样的东西（我仍然得到整数结果）。 – Thijs

回答

1

我在button旁边添加了span。计算得分后，不要显示警报，而是将答案放在span中。

function calculate(){ 
 
    // The value property returns a string, use parseInt to convert it to an integer. 
 
    var targetAvgDamage = parseInt(document.getElementById("a").value, 10), 
 
     numberOfBattles = parseInt(document.getElementById("b").value, 10), 
 
     battlesFought = parseInt(document.getElementById("c").value, 10), 
 
     currentAvgDamage = parseInt(document.getElementById("d").value, 10); 
 

 
    var answer = ((targetAvgDamage * numberOfBattles) - (battlesFought * currentAvgDamage))/(numberOfBattles - battlesFought); 
 
    
 
    // Get the element from the DOM to place the answer in. 
 
    var answerCell = document.getElementById('answer-cell'); 
 
    // Set the text content of the element. 
 
    answerCell.textContent = 'The answer is: ' + Math.ceil(answer); 
 
} 
 

 
var 
 
    // Get the button element from the DOM. 
 
    calculateTrigger = document.getElementById('calculate-btn'); 
 
// Attach an event handler for the visitor clicks on the button. 
 
calculateTrigger.addEventListener('click', calculate);
* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
 
body { margin:40px; background-color:#05537b; } 
 
.thisTable td { line-height:36px; font-size:14px; } 
 
.container { background-color:#EEE; padding:5px 15px 15px 15px; border:1px solid #CCC; margin-bottom:25px; width:100%; text-align:left } 
 
.box { background-color:#FFF; border:1px solid #CCC; width:40px; margin:0px 4px; } 
 
.button { margin-left:10px; background-color:#333; border:1px solid #CCC; width:25px; color:#FFF; font-weight:bold; } 
 
.answer { padding-left:10px } 
 
.answer b { text-decoration:underline } 
 
.how { color:#555; margin-left:15px; font-size:13px; background-color:#FFF; padding:2px 4px } 
 
.how b { color:#D00; font-weight:bold; text-decoration:none }
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px"> 
 
    <center> 
 
    <div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px"> 
 
    Average Damage Calculator 
 
    </div> 
 

 
    <div class=container> 
 

 
     <h3>Calculate Target Average</h3> 
 

 
     <table class=thisTable> 
 
     <tr> 
 
      <td>Type in your target average damage</td> 
 
      <td><input type='number' id='a'/></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type the amount of battles you want to achieve it by</td> 
 
      <td><input type='number' id='b'/></td> 
 
     <tr> 
 
     <td>Type in your current number of battles</td> 
 
     <td><input type='number' id='c'/></td> 
 
     <tr> 
 
      <td>Type in your current average damage</td> 
 
      <td><input type='number' id='d'/></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="calculate-btn">calculate</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <span id="answer-cell"></span> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
</div>

为了圆你可以使用多种方法的答案，请参阅下面的一些例子。

var a = 24.5123678; 
 

 
console.log(`Round up to nearest int: ${Math.ceil(a)}`); 
 
console.log(`Round down to nearest int: ${Math.floor(a)}`); 
 
console.log(`Round to the nearest int: ${Math.round(a)}`); 
 
console.log(`Round up to a number of decimals: ${a.toFixed(4)}`);

来源

2017-08-31 19:53:54 Thijs

+0

你做到了！你知道了！非常感谢，我不知道这个功能。有什么方法可以减少答案中的数字吗？现在我得到“2788.4560xxxxxxx”，但只是“2788”就可以。 –

+0

您可以使用'Math.ceil（ans）'将四舍五入到最接近的整数或'Math.floor（ans）'向下取整。 – Thijs

+0

我用一些舍入数字的例子更新了答案。 – Thijs

0

您可以添加新的td你的表，然后使用innerHTML添加您的计算结果为新td（与id="result"）。

function calculate() { 
 
    var A = document.getElementById("a").value; 
 
    var B = document.getElementById("b").value; 
 
    var C = document.getElementById("c").value; 
 
    var D = document.getElementById("d").value; 
 

 
    var ans = ((A * B) - (C * D))/(B - C); 
 

 
    //Here you assign your result to the new td 
 
    var Result = document.getElementById("result").innerHTML = "Result: " + ans; 
 
}
* { 
 
    font-family: arial; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 40px; 
 
    background-color: #05537b; 
 
} 
 

 
.thisTable td { 
 
    line-height: 36px; 
 
    font-size: 14px; 
 
} 
 

 
.container { 
 
    background-color: #EEE; 
 
    padding: 5px 15px 15px 15px; 
 
    border: 1px solid #CCC; 
 
    margin-bottom: 25px; 
 
    width: 100%; 
 
    text-align: left 
 
} 
 

 
.box { 
 
    background-color: #FFF; 
 
    border: 1px solid #CCC; 
 
    width: 40px; 
 
    margin: 0px 4px; 
 
} 
 

 
.button { 
 
    margin-left: 10px; 
 
    background-color: #333; 
 
    border: 1px solid #CCC; 
 
    width: 25px; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.answer { 
 
    padding-left: 10px 
 
} 
 

 
.answer b { 
 
    text-decoration: underline 
 
} 
 

 
.how { 
 
    color: #555; 
 
    margin-left: 15px; 
 
    font-size: 13px; 
 
    background-color: #FFF; 
 
    padding: 2px 4px 
 
} 
 

 
.how b { 
 
    color: #D00; 
 
    font-weight: bold; 
 
    text-decoration: none 
 
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px"> 
 
    <div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div> 
 
    <div class=container> 
 
     <h3>Calculate Target Average</h3> 
 
     <table class=thisTable> 
 
     <tr> 
 
      <td>Type in your target average damage <input type='number' id='a' /> </td> <td id="result">here</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td> 
 
      <tr> 
 
      <td>Type in your current number of battles <input type='number' id='c' /></td> 
 
      <tr> 
 
       <td>Type in your current average damage <input type='number' id='d' /></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <button onClick='calculate()'>calculate</button> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div>

来源

2017-08-31 20:01:28

1

正如您所标记的问题jQuery的，我重拍你的例子来利用它。此外，还有一些建议的更改：字段名称/变量名称将受益于它们包含的内容的线索，而不是对事件侦听器进行硬编码，以编程方式附加它们。我的代码中的评论应该显示发生了什么。

// Rather than an inline click event listener, as the OP has 
 
// tagged the question jQuery, we can simply attach the event 
 
// listener here. 
 
$(".calc-btn").on("click", calculate); 
 

 
/***** 
 
* function to actually calculate the target value. This gathers 
 
* all the given fields, performs the requisite math, and outputs 
 
* a rounded value to the answer pane. 
 
*****/ 
 
function calculate() { 
 
    // Note the meaningful names. While not a key part of your 
 
    // question, it will help down the line with debugging errors 
 
    // if your variables and fields have meaningful names. 
 
    var targetDamage = parseInt($("[name='target-damage']").val()); 
 
    var targetBattles = parseInt($("[name='target-battles']").val()); 
 
    var currentBattles = parseInt($("[name='current-battles']").val()); 
 
    var currentDamage = parseInt($("[name='current-damage']").val()); 
 

 
    // Given the above fields, we can see what we're actually doing 
 
    // rather than simply manipulating A, B, C and D. 
 
    var ans = ((targetDamage * targetBattles) - (currentBattles * currentDamage))/(targetBattles - currentBattles); 
 
    var remainingBattles = targetBattles-currentBattles; 
 

 

 
    // Stick the answer in the answer pane! 
 
    $(".calculator-answer-pane").text("You need to average "+Math.round(ans)+" over the next "+remainingBattles+" battles to reach your target."); 
 
}
* { 
 
    font-family: arial; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 40px; 
 
    background-color: #05537b; 
 
} 
 

 
.thisTable td { 
 
    line-height: 36px; 
 
    font-size: 14px; 
 
} 
 

 
.main-container { 
 
    width: 1000px; 
 
    background-color: #FFF; 
 
    padding: 10px 20px; 
 
    text-align: center; 
 
    -moz-border-radius: 10px; 
 
} 
 

 
.calculator-container { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    padding-bottom: 20px; 
 
    padding-top: 8px; 
 
} 
 

 
.calculator-main-pane { 
 
    background-color: #EEE; 
 
    padding: 5px 15px 15px 15px; 
 
    border: 1px solid #CCC; 
 
    margin-bottom: 25px; 
 
    width: 100%; 
 
    text-align: left 
 
} 
 

 
.box { 
 
    background-color: #FFF; 
 
    border: 1px solid #CCC; 
 
    width: 40px; 
 
    margin: 0px 4px; 
 
} 
 

 
.button { 
 
    margin-left: 10px; 
 
    background-color: #333; 
 
    border: 1px solid #CCC; 
 
    width: 25px; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.answer { 
 
    padding-left: 10px 
 
} 
 

 
.answer b { 
 
    text-decoration: underline 
 
} 
 

 
.how { 
 
    color: #555; 
 
    margin-left: 15px; 
 
    font-size: 13px; 
 
    background-color: #FFF; 
 
    padding: 2px 4px 
 
} 
 

 
.how b { 
 
    color: #D00; 
 
    font-weight: bold; 
 
    text-decoration: none 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-container"> 
 
    <center> 
 
    <div class="calculator-container">Average Damage Calculator</div> 
 
    <div class="calculator-main-pane"> 
 
     <h3>Calculate Target Average</h3> 
 
     <table class=thisTable> 
 
     <tr> 
 
      <td>Type in your target average damage</td> 
 
      <td> 
 
      <input type='number' name='target-damage' /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type the amount of battles you want to achieve it by</td> 
 
      <td> 
 
      <input type='number' name='target-battles' /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type in your current number of battles</td> 
 
      <td> 
 
      <input type='number' name='current-battles' /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Type in your current average damage</td> 
 
      <td> 
 
      <input type='number' name='current-damage' /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button class="calc-btn">calculate</button> 
 
      </td> 
 
      <td class="calculator-answer-pane"></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </center> 
 
</div>

来源

2017-08-31 20:12:12 Snowmonkey

+0

超出工作范围。但有2个问题。 1）你是如何做到的，以便盒子和答案都被分配和集中？ 2）有可能得到这样的答案：“你需要在接下来的（239场）战斗中平均造成2778点伤害才能达到你的目标伤害数量 我从500-261得到239，因为还有多少战斗需要玩吗？可以添加，因为你添加了有意思的名字吗？ –

+0

你正在将所有东西都添加到单个表格单元格中 - 我只需将标签放在一个字段中，然后在一秒钟内放入该字段。我已经更新了放置在答案窗格中的文字，请参阅上面的内容，您可以根据自己的需要制作文字 – Snowmonkey

+0

好的，我明白你是如何做到的，那太超酷了！更容易，谢谢。 –

相关问题

 相关问题