Листинг 4.1. Вычисление площади выбранной с помощью переключателя фигуры
<HTML>
<HEAD>
<TITLE>Данные из формы типа "переключатель". Событие Click</TITLE>
<script language="JavaScript">
<!—-//
function test (k)
{ var a= form1.data.value
if (a !="" )
form1.res.value= k*Math.pow(a,2)
else alert ("Введите значение")
}
//-—>
</script>
</HEAD>
<BODY>
<FORM name="form1">
Введите значение
<input type="text" name="data" size=10>
<hr>
Укажите форму <br>
<input type="radio" name="fv" value=l
onClick="test(forml.elements[1].value)">квадрат<br>
<input type="radio" name="fv" value=3.14
onClick="test(forml.elements[2].value)">круг<br>
<input type="radio" name="fv" value=0.42
onClick="test(forml.elements[3].value)">треугольник<hr>
<input type="reset" value="0тменить"><hr>
Площадь: <input type="text" name="res" size=10>
</FORM>
</BODY>
</HTML>
Перепишем функцию test, осуществляющую доступ к элементам формы через свойство-массив elements.
function test (k)
{ var a= document.forms[0].elements[0].value
if (a !="" )
document.forms[0].elements[5].value= k*Math.pow(a,2)
else alert ("Введите значение")
}
В следующем примере проверяется правильность обработки данных элемента управления "переключатель". Объект radio имеет свойства name, type, value. Событие FOCUS возникает, когда элемент формы получает фокус. При получении фокуса переключателем в поле для многострочного текста отображаются значения свойства для выбранного переключателя.
Свойства переключателя
Необходимо написать сценарий, в котором для каждого переключателя выводятся значения соответствующих ему свойств, как на рис. 4.1.
Группа элементов состоит из четырех переключателей, пятый элемент формы — поле ввода многострочного текста. При выполнении сценария формируется строка s, содержащая требуемые значения. Фактическим параметром функции обработки события test является элемент формы — переключатель, а не значение параметра value выбранного переключателя, как в предыдущем примере. Далее в сценарии для получения свойств переключателя ИСПОЛЬЗУЮТСЯ конструкции obj. value, obj.name, obj.type. В этом примере в качестве значения параметра value в переключателе применяется строковый литерал.
HTML-код приведен в листинге 4.2.