Javascript функция, кажется, всегда получает один и тот же вход

Question

Javascript функция, кажется, всегда получает один и тот же вход

0

Я боюсь часами с этим кодом. Независимо от того, какой выбор я делаю, вывод всегда такой, как если бы я выбрал первую строку (set17, gpio17 и все, что находится в первом поле со списком).

Я попытался изменить одиночные кавычки для двойных кавычек, попробовал разные браузеры и определил разные ajaxFunctions для каждой строки, но результат всегда один и тот же.

Ожидаемым результатом является, например, окно предупреждения со значениями строки GPIO24, когда поле со списком изменено.

Может ли кто-нибудь с более свежим разумом сказать мне, что я делаю неправильно?

Кстати, есть ли способ передать переменные $ item и $ action в document.getElementById без необходимости создавать текстовые поля?

заранее спасибо

<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en">
<body>

<script type="text/javascript">
function ajaxFunction(){
var action = document.getElementById('action');
var item = document.getElementById('item');
var value = document.getElementById('value');
alert("You entered: " + " " + action.value + " " + value.value + " " + item.value )


}
</script>


<center><b>AJAX TEST PAGE</b><br/><br/><table border="1"><tr>

<td>gpio17</td><td> Sensor Wireless #3 <td>
<form name='gpio17'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_1> value_option_1</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set17' /> <br />
<input type='text' id='item' value='gpio17' /></td></form></td></tr><tr>

<td>gpio23</td><td> Sensor Wireless #2<td>
<form name='gpio23'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_2> value_option_2</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set23' /> <br />
<input type='text' id='item' value='gpio23' /></td></form></td></tr><tr>

<td>gpio24</td><td> Sensor Wireless #1<td>
<form name='gpio24'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_1> value_option_1</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set24' /> <br />
<input type='text' id='item' value='gpio24' /></td></form></td></tr><tr>

<td>gpio25</td><td> Sensor Wireless #0
<td><form name='gpio25'>
<select id='value' onchange='ajaxFunction()'>
<option value= value_option_3> value_option_3</option>
<option value='value-option_1'>Option_1_display</option>
<option value='value-option_2'>Option_2_display</option>
<option value='value-option_3'>Option_3_display</option>
</select><td>
<input type='text' id='action' value='set25' /> <br />
<input type='text' id='item' value='gpio25' /></td></form></td></tr>

</table>

</body>
</html>

user2433937 05 янв. 2014, в 05:43

Источник

1

Почему у вас есть несколько элементов с одинаковым свойством id ? Он должен быть уникальным.
Dan Abramov 05 янв. 2014, в 04:16

Теги:

javascript

html

1 ответ

Ещё вопросы

Почему у вас есть несколько элементов с одинаковым свойством id ? Он должен быть уникальным.

nnnnnn · Accepted Answer · 2014-01-05T01-54-00.000Z

Ваш html недействителен: атрибут id должен быть уникальным. Когда вы используете document.getElementById() с идентификатором, который не является уникальным, вы получаете только один элемент назад (в большинстве браузеров он будет первым).

Вы можете передать ссылку на конкретный элемент, что событие было вызвано следующим образом:

<select id='makethisuniqueordeleteattributecompletelyifnotused'
        onchange='ajaxFunction(this)'>

"есть ли способ передать переменные $ item и $ action в" document.getElementById "без необходимости создавать текстовые поля?"

Да. Поскольку они являются только строковыми значениями, вы можете сделать это:

<select id='makethisuniqueordeleteattributecompletelyifnotused'
        onchange='ajaxFunction(this,"set17","gpio17")'>

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

function ajaxFunction(el, action, item){
    // selected value of select element in question:
    var value = el.value;
    alert("You entered: " + " " + value + " " + action + " " + item );
}

Демо: http://jsfiddle.net/8ACHe/