index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Работа с input</title>
</head>
<body>
<select name="" id="mySelect" onchange="fun1()">
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Pineapple</option>
<option value="">Banana</option>
</select>
<script src="script.js"></script>
</body>
</html>
script.js
/*
HTMLSelectElement.selectedIndex показывает порядковый номер первого выбранного элемента <option>.
Значение -1 означает, что ни один из элементов не выбран.
.text() - получает текст выбранного элемента в наборе. Если таких элементов несколько, получит содержимое всех элементов, разделенные пробелом
*/
function fun1() {
var sel = document.getElementById('mySelect').selectedIndex;
var options = document.getElementById('mySelect').options;
alert('Выбрана опция ' +options[sel].text);
}
Работа с ползунком:
Считаем значение ползунка и выведем его в абзац.
oninput срабатывает при введении данных в форму или перемещении ползунка.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<p id="one"></p>
script.js
function fun1() {
var range = document.getElementById('r1');
var p = document.getElementById('one');
p.innerHTML = range.value; // подгрузим данные в параграф
}
Выведем значение ползунка в input.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<input type="text" id="i1"/>
script.js
function fun1() {
var range = document.getElementById('r1');
var i1 = document.getElementById('i1');
i1.value = range.value;
}
Изменим ширину ползунка.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<div id="test"></div>
style.css
#test {
height: 20px;
width: 20px;
background: green;
}
script.js
function fun1() {
var range = document.getElementById('r1');
var div = document.getElementById('test');
div.style.width = range.value+'px';
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Работа с input</title>
</head>
<body>
<select name="" id="mySelect" onchange="fun1()">
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Pineapple</option>
<option value="">Banana</option>
</select>
<script src="script.js"></script>
</body>
</html>
script.js
/*
HTMLSelectElement.selectedIndex показывает порядковый номер первого выбранного элемента <option>.
Значение -1 означает, что ни один из элементов не выбран.
.text() - получает текст выбранного элемента в наборе. Если таких элементов несколько, получит содержимое всех элементов, разделенные пробелом
*/
function fun1() {
var sel = document.getElementById('mySelect').selectedIndex;
var options = document.getElementById('mySelect').options;
alert('Выбрана опция ' +options[sel].text);
}
Работа с ползунком:
Считаем значение ползунка и выведем его в абзац.
oninput срабатывает при введении данных в форму или перемещении ползунка.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<p id="one"></p>
script.js
function fun1() {
var range = document.getElementById('r1');
var p = document.getElementById('one');
p.innerHTML = range.value; // подгрузим данные в параграф
}
Выведем значение ползунка в input.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<input type="text" id="i1"/>
script.js
function fun1() {
var range = document.getElementById('r1');
var i1 = document.getElementById('i1');
i1.value = range.value;
}
Изменим ширину ползунка.
index.html
<input type="range" min="0" max="100" step="2" oninput="fun1()" id="r1"/>
<div id="test"></div>
style.css
#test {
height: 20px;
width: 20px;
background: green;
}
script.js
function fun1() {
var range = document.getElementById('r1');
var div = document.getElementById('test');
div.style.width = range.value+'px';
}
Комментариев нет:
Отправить комментарий