尝试使用getElementByID制作损坏计算器，但我认为它没有正常工作

时间：2017-05-31 12:32:00

标签： javascript html math getelementbyid 

<!DOCTYPE html>
<html>
<title> Riven Calculator </title>
<style type="text/css">
body {
    background-image: url("BOOP.jpg");
}
</style>

<body style="background-color: #a6a6a6;">
<br>
<br>
<br>
<br>
<br>
<h1 align="center"> Riven Damage Calculator </h1>

<script type="text/javascript">
var level = document.getElementById('RIVEN_LEVEL');
var rivenQrank = document.getElementById('RIVEN_Q');
var rivenWrank = document.getElementById('RIVEN_W');
var rivenErank = document.getElementById('RIVEN_E');
var rivenRrank = document.getElementById('RIVEN_R');
var bonusAD = document.getElementById('RIVEN_AD');

var rivenHP = 558.48 + (86 * level);
var rivenAD = 56.04 + (3 * level) + bonusAD;
var rivenARM = 24.376 + (3.2 * level) ;
var rivenMR = 32.1 + (1.25 * level);

var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;

function myBoop() {
    console.log(rivenQDMG);
    console.log(rivenWDMG);
    console.log(rivenEDMG);
    console.log(rivenRDMG);
}

</script>

<center>
<p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
<p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
<p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
<p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
<p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
<p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
<br>
<br>
<button onclick="myBoop()"> Calculate </button>
</center>

</body>
</html>

它的目的是计算每个技能在游戏中给定时间所造成的伤害，但每当我尝试用它计算时，它表示Q造成32.416点伤害，W造成50点伤害，E盾牌90点伤害，R造成100点伤害。我觉得它与代码的getElementById部分有关，但我并不完全确定。

4 个答案:

答案 0 :(得分：0)

我没有彻底阅读JS代码所以我不知道计算是如何构建的（特别是因为我不知道你正在考虑哪个游戏）。

但是当您使用getElementById()，并且您想要用户在文本字段中输入的值时，您必须在其末尾添加.value()（fe document.getElementById("RIVEN_AD").value();） ，因为否则你只会回到对象而不是它的价值。

答案 1 :(得分：0)

声明函数内的所有变量。您需要添加每个元素值调用的.value。并添加parseFloat以将字符串解析为数字

＆＃13;
＆＃13; 
function myBoop() {
var level = parseFloat(document.getElementById('RIVEN_LEVEL').value);
var rivenQrank = parseFloat(document.getElementById('RIVEN_Q').value);
var rivenWrank = parseFloat(document.getElementById('RIVEN_W').value);
var rivenErank = parseFloat(document.getElementById('RIVEN_E').value);
var rivenRrank = parseFloat(document.getElementById('RIVEN_R').value);
var bonusAD = parseFloat(document.getElementById('RIVEN_AD').value);

if(!level && !rivenQrank && !rivenWrank && !rivenErank && !rivenRrank && !bonusAD){ // for validation to all boxes
console.log('Fill the all boxes');
return false;
}
var rivenHP = 558.48 + (86 * level);
var rivenAD = 56.04 + (3 * level) + bonusAD;
var rivenARM = 24.376 + (3.2 * level);
var rivenMR = 32.1 + (1.25 * level);

var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;
  console.log(rivenQDMG);
  console.log(rivenWDMG);
  console.log(rivenEDMG);
  console.log(rivenRDMG);
}
＆＃13; 
<body style="background-color: #a6a6a6;">
  <br>
  <br>
  <br>
  <br>
  <br>
  <h1 align="center"> Riven Damage Calculator </h1>

  <center>
    <p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
    <p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
    <p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
    <p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
    <p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
    <p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
    <br>
    <br>
    <button onclick="myBoop()"> Calculate </button>
  </center>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

@StuntHacks对于从输入中获取值是正确的。您的脚本也以错误的顺序放置。你的脚本应该在正文之前的最后一个，因为你是在一个尚未被引用的东西上调用getElementById()。

<div id="riven"></div>
<script>
document.getElementById("riven");
</script>

答案 3 :(得分：0)

  1. 您获得的元素为getElementById()，需要获取其value属性

  2. 您需要在函数执行时获取值，因此请移动myBoop()函数中的代码

    3. function myBoop() {
    var level = document.getElementById('RIVEN_LEVEL').value;
    var rivenQrank = document.getElementById('RIVEN_Q').value;
    var rivenWrank = document.getElementById('RIVEN_W').value;
    var rivenErank = document.getElementById('RIVEN_E').value;
    var rivenRrank = document.getElementById('RIVEN_R'.value);
    var bonusAD = document.getElementById('RIVEN_AD').value;
    
    var rivenHP = 558.48 + (86 * level);
    var rivenAD = 56.04 + (3 * level) + bonusAD;
    var rivenARM = 24.376 + (3.2 * level) ;
    var rivenMR = 32.1 + (1.25 * level);

    var rivenQDMG = 10 + (20 * rivenQrank) + (rivenAD * (.4 + .05 * rivenQrank));
    var rivenWDMG = 50 + (30 * rivenWrank) + (rivenAD - 56.04);
    var rivenEDMG = 90 + (30 * rivenErank) + (rivenAD - 56.04);
    var rivenRDMG = 100 + (50 * rivenRrank) + (rivenAD - 56.04) * .6;

    console.log(rivenQDMG);
    console.log(rivenWDMG);
    console.log(rivenEDMG);
    console.log(rivenRDMG);
}
    <!DOCTYPE html>
<html>
<title> Riven Calculator </title>
<style type="text/css">
body {
    background-image: url("BOOP.jpg");
}
</style>

<body style="background-color: #a6a6a6;">
<br>
<br>
<br>
<br>
<br>
<h1 align="center"> Riven Damage Calculator </h1>

<center>
<p align="center"> Input your level: </p> <input type="text" id="RIVEN_LEVEL"> <br>
<p align="center"> Input your Q rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_Q"> <br>
<p align="center"> Input your W rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_W"> <br>
<p align="center"> Input your E rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_E"> <br>
<p align="center"> Input your R rank (Rank 1 would be 0): </p> <input type="text" id="RIVEN_R"> <br>
<p align="center"> Input your bonus AD: </p> <input type="text" id="RIVEN_AD"> <br>
<br>
<br>
<button onclick="myBoop()"> Calculate </button>
</center>

</body>
</html>

    P.S。 Riven OP

相关问题
最新问题