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

Question

我在这里写了这段代码，但是我想添加一些我想要帮助的东西，而不是一个主编码器，我不知道该怎么做。

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

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>

目前我已经拥有它，因此当用户输入信息并单击“计算”按钮时，答案会弹出一个小窗口。但我不希望这种情况发生。我想要发生的是，当你点击“计算”按钮时，答案（一个数字）将出现在下方，或按钮旁边，而不是在屏幕上弹出。我还希望通过如此具体来改进答案，并且只将其放在千分之一的小数点上。

Answer 1

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

中

＆＃13;

＆＃13;

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);

＆＃13;

* { 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 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要回答答案，您可以使用多种方法，请参阅下面的一些示例。

＆＃13;

＆＃13;

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)}`);

＆＃13;

＆＃13;

＆＃13;

Answer 2

当你标记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>

Answer 3

您可以在表格中添加新的td，然后使用innerHTML将计算结果添加到新的td（id="result"）。

＆＃13;

＆＃13;

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;
}

＆＃13;

* {
  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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;