代码之家 › 专栏 › 技术社区 › noviceJS

从元素获取.value时未定义

dom javascript

noviceJS · 技术社区 · 2 年前

以下是奖励寿命为1的HTML:

    <h3>PLAYER HEALTH<span value="1" id="bonus-life" >1</span></h3>
    <progress class="playerHealth health" max="100" value="100">100%</progress>

以下是用于获取跨度值和进度元素的JavaScript:

    const playerHealthBar = document.querySelector(".playerHealth");
    const bonusLifeEl = document.querySelector("#bonus-life");

    console.log("In index.js bonusLifeEl.innerHTML: " + bonusLifeEl.innerHTML);
    console.log(
      "In index.js - bonusLifeEl value & typeof: " +
        bonusLifeEl.value +
        " " +
        typeof bonusLifeEl.value
    );
    console.log(
      "In index.js - player health value & typeof: " +
        playerHealthBar.value +
        " " +
        typeof playerHealthBar.value
    );

我可以获得正确的playerHealthBar值和类型,但当我尝试使用奖励生命时,我得到的都是未定义的,除非我使用innerHTML,否则我会在innerHTML中获得“值”。

控制台日志输出:

In index.js bonusLifeEl.innerHTML: 1
index.js:8 In index.js - bonusLifeEl value & typeof: undefined undefined
index.js:14 In index.js - player health value & typeof: 100 number

1 回复 | 直到 2 年前

T.J. Crowder 2 年前

只有 input , select ,以及某些其他特定元素具有 value 属性,而不是 span 元素。即使你放了一个 价值 属性在您的 跨度 ,不会被 价值 属性(它也是的无效属性 跨度 元素)。要在该元素(而不是其文本内容)上设置任意值,您可以使用 data-* attribute 和 getAttribute 或 dataset 以检索它。

const value = bonusLifeEl.dataset.value;

// Side note: I'd use `getElementById` rather than `querySelector` here
const bonusLifeEl = document.querySelector("#bonus-life");
const value = bonusLifeEl.dataset.value;
console.log(value,);

<h3>PLAYER HEALTH<span data-value="1" id="bonus-life" >1</span></h3>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前