Javascript, чтобы выбрать опцию drop down в классе

Question

У меня есть расширение chrome, которое, когда я нажимаю на него, будет нажимать на все те же кнопки элементов на странице, а затем после того, как функция будет выполнена, я хочу, чтобы она выбрала все «П на выпадении. У меня есть несколько классов «pf» на странице и вам нужно будет установить все из P. Первая функция работает, когда она переходит ко второй функции, появляется ошибка, показывающая, что параметр. Length не определен. Мой вопрос в том, как он получает все значения параметров внутри класса?

function clickUpdate(_callback) { 
    var updateArray = document.getElementsByClassName("updateButton"); 
[].slice.call(updateArray).forEach(function(item) { 
    item.click(); 
}); 
console.log("this is the array legnth: " + updateArray.length); 
_callback(); 
} 

//Get select object 
var objSelect = document.getElementsByClassName("pf"); 

//Set selected 
setSelectedValue(objSelect, "P"); 

function setSelectedValue(selectObj, valueToSet) { 
    clickUpdate(function(){ 
     console.log("I am done with the first function"); 
    }); 
for (var i = 0; i < selectObj.options.length; i++) { 
    if (selectObj.options[i].text == valueToSet) { 
     selectObj.options[i].selected = true; 
     return; 
    } 
} 
} 

<select class="pf"> 
<option selected="selected" value="">Not Run</option> 
<option value="P">Pass</option> 
<option value="F">Fail</option> 
<option value="N">N/A</option></select> 

Answer 1

Вот ваша проблема:

//Get select object 
var objSelect = document.getElementsByClassName("pf"); 

Это не просто возвращает выберите выпадающее меню - it returns an HTMLCollection (т.е. группа элементов) с любых элементов, совпадающим это имя класса. Даже если есть только один подарок, он будет возвращен как коллекция. Но ваша функция setSelectedValue не ожидает сбора, всего лишь одного элемента - вот почему вы получаете ошибку undefined.

Есть несколько способов, вы можете справиться с этим, в зависимости от того, что вы делаете в другом месте на странице:

• Вы можете использовать document.querySelector('.pf') вернуть первый элемент с этим классом - это сделать, если у вас будет только один .pf на странице или вы хотите управлять одним из них.
• В качестве альтернативы вы можете использовать document.getElementsByClassName('pf')[0] для достижения того же.
• Или вы можете дать выберите id и использовать document.querySelector('#pf') или document.getElementById('pf')
• Если, с другой стороны, вы планируете иметь несколько .pf элементов, которые все работают таким образом ... вы должны сделать некоторые рефакторинг первым , Но это еще одно обсуждение.