Question

因此，我正在创建一个小型的交互式故事游戏，以帮助我学习和练习JavaScript。

无论如何，我可以创建一个数字并将其放入DOM（恰好在我想要的位置），但是在将该数字带回DOM中以在函数中使用时遇到困难。

我已经过去了四个小时，在通过互联网进行搜索之后，我再次转到了排名第一的接受答案的地方。

因此，为了更详细地说明一下；我创建了一个变量，该变量创建一个“攻击”编号并将其放置在DOM中。但是，当我尝试将其用于减少敌人生活的功能时，我没有成功。

代码如下：

var bandit1Life = 20;
var bandit1Attack = 3;
//Declares the life and attack of the enemy.

var yourAttack = Number(document.getElementById("attackvalue").value);
//This runs as null. Along with the many other variations I have tried. I also get NaN with another variation I thought was closer (I will include that below).

var fightAttack = {
    pressAttack: function() {
    var e = bandit1Life - yourAttack.value;
    console.log(e);
    }
};
//This is the function that runs when the corresponding button is pressed - I console.log it to test if it works before placing it into the DOM.

这是我认为更接近但仍返回NaN的变体，即使我在末尾添加.value也是如此：

var yourAttack = yourAttackNum;

在此处创建值（在p元素内）。

<p id="attackValue"> </p>

Answer 1

您需要为id和getElementById使用相同的名称，因为它们区分大小写，例如AttackValue，而不是AttackValue。

还因为它不是输入，所以不会具有prop属性使用innerText

您还需要在p标记内添加一个值，否则将创建NaN

Number(undefined) // NaN

https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText

const bandit1Life = 20;
const bandit1Attack = 3;

const yourAttack = Number(document.getElementById("attackValue").innerText);

const fightAttack = {
  pressAttack: () => {
    const e = bandit1Life - yourAttack;
    console.log(e);
  }
};


fightAttack.pressAttack()

<p id="attackValue">2</p>

Answer 2

由于您的元素不是输入或其他交互元素，因此应使用innerHTML或innerText获取其内容。另外请记住，该ID区分大小写（因此您必须指定attackValue，而不是attackvalue）。

演示：

var bandit1Life = 20;
var bandit1Attack = 3;
var yourAttack = Number(document.getElementById("attackValue").innerText);
console.log(yourAttack);

var fightAttack = {
  pressAttack: function() {
    var e = bandit1Life - yourAttack;
    console.log(e);
  }
};


fightAttack.pressAttack()

<div id="attackValue">32</div>

我不知道如何从DOM（JavaScritp）获取数字

2 个答案: