尝试使用 getElementByID 制作伤害计算器，但我认为它无法正常工作

Question

<!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 部分有关，但我不完全确定。

Answer 1

好吧，我还没有通读 JS 代码，所以我一开始不知道计算是如何构建的（尤其是因为我不知道您指的是哪个游戏）。

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

Answer 2

声明里面的所有变量 function.And 你需要添加 .value 的每个元素值 call.And 添加 parseFloat 来解析字符串到 number

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

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

Answer 3

@StuntHacks 关于从输入中获取值的说法是正确的。您的脚本也以错误的顺序放置。您的脚本应该放在正文之前，因为您正在调用 getElementById() 尚未引用的内容。

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

Answer 4

你得到了带getElementById()的元素，需要得到它的值属性
您需要在函数执行时获取值，因此将代码移动到myBoop()函数

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. 锐雯 OP

尝试使用 getElementByID 制作伤害计算器，但我认为它无法正常工作

Tried making a damage calculator using getElementByID but I don't think it's working correctly

html

javascript

math

getelementbyid