获取span元素value属性时返回undefined问题求助

原因分析 #

• <progress>是HTML表单类元素，原生内置了与标签value属性对应的DOM对象属性，直接通过.value就能拿到对应值，还会自动转换为数字类型。
• <span>是普通行内元素，没有内置的.value DOM属性，你在HTML里添加的value="1"属于自定义属性，DOM对象不会自动将其映射为.value属性，所以直接访问会返回undefined。

解决方案 #

有两种规范方式获取span的自定义属性值：

1. 使用getAttribute()读取自定义属性

直接读取HTML上的value属性值，返回结果为字符串，需要的话可转为数字：

const bonusLifeValue = bonusLifeEl.getAttribute('value');
// 转换为数字类型
const bonusLifeNum = Number(bonusLifeValue);
console.log(bonusLifeValue, typeof bonusLifeValue); // 输出 "1" string
console.log(bonusLifeNum, typeof bonusLifeNum); // 输出 1 number

2. 使用data-*自定义属性（更符合HTML规范）

先修改HTML，将自定义属性改为data-value：

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

再通过DOM对象的dataset属性获取：

const bonusLifeValue = bonusLifeEl.dataset.value;
const bonusLifeNum = Number(bonusLifeValue);
console.log(bonusLifeValue, typeof bonusLifeValue); // 输出 "1" string
console.log(bonusLifeNum, typeof bonusLifeNum); // 输出 1 number

修改后控制台输出示例 #

若采用第一种方案修改JS代码，控制台会输出：

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

内容的提问来源于stack exchange，提问作者noviceJS