1. 首頁
  2. 問答
  3. 如何添加一個按鈕，將按鈕旁邊的輸入添加到答案中？

如何添加一個按鈕，將按鈕旁邊的輸入添加到答案中？

2017-08-31 64 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

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

相關問題

 相關問題