Question

请帮助了解如何正确更改现有功能：

var o=document.getElementById('input-option77');
var mon = o.options[o.selectedIndex].getAttribute('price_value');
var nmon = Number(mon);

使用getElementByClassName。

我尝试过这样做，但答案是NaN：

var e = document.getElementsByClassName('test');
var nmon = Number(e[0].options[e[0].selectedIndex].price_value);

我的示例表单：

<select name="test-name" id="input-option77" class="main-form test">
<option value="test1" price_value="0">Select1</option>
<option value="test2" price_value="200">Select2</option>
<option value="test3" price_value="300">Select3</option>
</select>

谢谢！

Answer 1

getElementsByClassName返回类似于数组的HTMLCollection，因此您只需访问查询中的第一个元素

var e = document.getElementsByClassName('test')[0];

Answer 2

您需要从getElementById更改为getElementsByClassName的唯一代码是将[0]添加到getElementsByClassName：

var o=document.getElementsByClassName('test')[0];

getElementsByClassName返回一个数组，假设只有一个数组，你只需要该数组中的第一个条目。

放回.getAttribute会给你代码：

var e = document.getElementsByClassName('test')[0]; 
var emon = Number(e.options[e.selectedIndex].getAttribute('price_value'));

工作小提琴：https://jsfiddle.net/v5w0yokm/

如何在getElementByClassName上正确更改getElementById？

2 个答案: