如何在JavaScript中使用document.getElementById获取input标签的value值

直接适配当前input场景 #

你原来的代码var price = document.getElementById('price')仅获取到了input DOM元素对象，没有读取对应的value属性，修改为如下代码即可正确拿到价格值：

// 直接读取input的value属性
var price = document.getElementById('price').value;

如果后续需要对价格做数值运算，建议同步转成数字类型，避免字符串拼接等异常：

// 转成浮点型数字，取值异常时默认返回0避免计算错误
var price = parseFloat(document.getElementById('price').value) || 0;

兼容原有普通标签+现有input场景 #

如果你需要同时兼容旧版普通标签（如span、div等）和新版input标签的价格展示方式，可以增加属性判断逻辑：

var priceEl = document.getElementById('price');
var price;
if (priceEl.tagName === 'INPUT') {
  // input元素取value属性
  price = parseFloat(priceEl.value) || 0;
} else {
  // 普通标签取文本内容
  price = parseFloat(priceEl.textContent.trim()) || 0;
}

额外注意项 #

你提供的input代码存在语法问题，readonly属性的写法有误，修正后的合法写法参考：

<input type="text" id="price" value="24.99" readonly>

避免属性不生效导致用户可以手动修改价格值。

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